Bir dizenin tüm oluşumlarının stilini değiştirme

Question

Site başlığımın, markalama nedenleriyle, bir başlıkta her görüntülendiğinde içeriğin geri kalanından benzersiz bir fontta görüntülenmesini istiyorum. Basitlik için, benim özel yazı tipimin Courier olduğunu ve şirketime SparklePony adını verdiğimi varsayalım. Yani, bir çizgi gibi

<h1 class="title">SparklePony Board of Directors</h1> 

sitemde varsayılan yazı tipini de Courier ve Yönetim Kurulu kelimesi SparklePony ile bir başlık gösterirdi. Sadece Courier bunu görmek istiyorum, dizesini değiştirmek Bir jQuery dize değiştirme kullanarak denedim

(Evet,. Bu iğrenç olacağını biliyorum) ama istemiyorum (bir sınıf ekleyerek Sadece bu kelimeye veya benzeri bir şeye.) 'un <span class="sparkle-pony">SparklePony</span> ile değiştirilmesi, klas eklemekten ziyade sitemde gösterilecek etiketlerin ve herşeyin yer aldığı tüm çirkin dize neden oldu.

Dizgimde yanlış bir şey mi yapıyorum, yoksa bir dizenin tüm örneklerini biçimlendirmenin daha iyi bir yolu var mı? Böyle

Answer 1

Böyle yapabilirsin - İstediğiniz seçici belirterek - # ('h1') veya sınıf tarafından .

$('.title').html(function(i,v){  
    return v.replace(/SparklePony/g,'<span class="sparkle">SparklePony</span>'); 
}); 
​ 

http://jsfiddle.net/cQjsu/

Answer 2

deneyin şey:

$.each($(".title"),function({ 
$(this).html($(this).html().replace("SparklePony","<span class='sparkle-pony'>SparklePony</span>")) 
}); 

Answer 3

(böyle sorularda tür önemli olacaktır) kod görmeden, en iyi tahmin doğru HTML ayrıştırmak hangi .text() yerine .html() arasında kullandığınız olmasıdır .

Answer 4

Bazı toplama ile yapabilirdi, ancak bu iyi bir başlangıç ​​noktası olabilir: http://jsfiddle.net/c24w/Fznh4/9/.

HTML

<div id="title">Highlight this blah blah HiGhLiGhT THIS blah</div> 
<button id="clickme">Click to highlight text</button> 

CSS

#title{ 
    font-family: sans-serif; 
    font-size: 20pt; 
    margin: 30px 0; 
} 
span.highlight{ 
    color: #09f; 
    font-weight: bold; 
} 

JavaScript

function highlightText(element, phrase, allOccurrences, caseSensitive){ 
    var modifiers = (allOccurrences ? 'g' : '') + (caseSensitive ? '' : 'i'); 
    var text = element.innerHTML; 
    element.innerHTML = text.replace(new RegExp(phrase, modifiers), function(match){ 
    return '<span class="highlight">' + match + '</span>'; 
    }); 
} 

var button = document.getElementById('clickme'); 
var el = document.getElementById('title'); 

button.onclick = function(){ 
    highlightText(el, 'highlight this', true, false); 
    button.onclick = null; 
}; 

Answer 5

Güzel ve kısa:

var $body = $("body"); 
$body.html($body.html().replace(/SparklePony/ig, "<span class='cool'>SparklePony</span>"));​ 

Ama $("body") çok masraflı seçici olduğunu unutmayın. Daha hassas bir ana hedef düşünmelisiniz.

Demo here (fiddle)