Cambia stile di tutte le occorrenze di una stringa

Question

Desidero che il titolo del mio sito venga visualizzato in un carattere univoco dal resto del contenuto ogni volta che appare in un'intestazione, per motivi di branding. Per semplicità, facciamo finta che il mio font speciale sia Courier e che la mia azienda si chiami SparklePony. Quindi, una linea come,

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

avrebbe mostrato un titolo con la parola SparklePony in Courier e Consiglio di Amministrazione nel mio carattere sito predefinito, Arial. (Sì, lo so che questo sarebbe orribile.)

Ho provato con una sostituzione di stringa jQuery, ma io non voglio sostituzione la stringa, voglio solo vederlo in Courier (l'aggiunta di una classe a solo quella parola, o qualcosa del genere.) Sostituire SparklePony con <span class="sparkle-pony">SparklePony</span> ha causato l'intera brutta stringa con tag e tutto da mostrare sul mio sito, piuttosto che aggiungere la classe.

Sto facendo qualcosa di sbagliato con la mia stringa di sostituzione, o c'è un modo migliore per stile tutte le occorrenze di una stringa?

Answer 1

Si può fare in questo modo - specificando il selettore che si desidera - # ('H1') o per classe .

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

http://jsfiddle.net/cQjsu/

Answer 2

provare qualcosa di simile:

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

Answer 3

Senza vedere il codice (che sarebbe un po importante in questioni come queste), ipotesi migliore è che si sta utilizzando .text() invece di .html() che analizzare il codice HTML in modo corretto .

Answer 4

Si potrebbe fare con un po 'di riordino, ma questo potrebbe essere un buon punto di partenza: 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

Nizza e breve:

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

Ma tenere a mente che $("body") è un selettore molto costoso. Dovresti considerare un target genitore più preciso.

Demo here (fiddle)