Zmiana stylu wszystkich wystąpień ciągu znaków

Question

Chcę, aby tytuł mojej strony był wyświetlany w unikalnej czcionce z reszty treści za każdym razem, gdy pojawi się w nagłówku, ze względu na branding. Dla uproszczenia, udawajmy, że moją specjalną czcionką jest Courier, a moja firma nazywa się SparklePony. Tak, jak linia,

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

pokaże nagłówek ze słowem SparklePony w Kurierze i Zarządu w mojej domyślnej witryny czcionką Arial. (Tak, wiem, że to byłoby ohydne.)

Próbowałem użyć wymiany ciągów jQuery, ale nie chcę zastąpić ciąg, chcę go zobaczyć w Courier (dodając klasy do tego samego słowa lub czegoś podobnego.) Zastąpienie SparklePony z spowodowało, że cały paskudny ciąg z tagami i wszystkim do wyświetlenia na mojej stronie, zamiast dodawać klasy.

Czy robię coś nie tak z zamiennikiem ciągu znaków, czy też istnieje lepszy sposób na stylizowanie wszystkich wystąpień ciągu znaków?

Answer 1

Można zrobić to w ten sposób - określając selektor chcesz - # ('h1') lub klasy .

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

http://jsfiddle.net/cQjsu/

Answer 2

spróbować czegoś takiego:

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

Answer 3

Bez zobaczenia kodu (co byłoby dosyć ważne pytania, takie jak to), najlepiej Domyślam się, że używasz .text() zamiast .html() co analizować HTML poprawnie .

Answer 4

Może to przydać się podczas sprzątania, ale może to być dobry punkt wyjścia: 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

Nicea i krótki:

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

Należy jednak pamiętać, że $("body") jest bardzo kosztowne selektor. Powinieneś rozważyć bardziej precyzyjny cel nadrzędny.

Demo here (fiddle)