すべての文字列のスタイルを変更する

Question

ブランディングの理由から、見出しに表示されるたびにコンテンツの残りの部分から一意のフォントで表示するようにします。わかりやすくするために、私の特別なフォントがCourierであり、私の会社はSparklePonyです。だから、ラインのような、

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

は私のサイトのデフォルトのフォント、Arialので宅配便や取締役会のワードSparklePonyとの見出しを表示します。 （はい、私はこれは恐ろしいだろう知っている。）私はjQueryの文字列置換を使用してみましたが、私は文字列を置換にしたくない

、私は宅配便でそれを見たい（クラスを追加しますその単語に似たものなど）。SparklePonyを<span class="sparkle-pony">SparklePony</span>に置き換えると、クラスを追加するのではなく、自分のサイトにタグとすべての醜い文字列が表示されます。

私は私の文字列の置き換えに間違っているのですか、それとももっと良い方法で文字列のすべての文字列をスタイルするのですか？

Answer 1

あなたはこのようにそれを行うことができます - あなたがしたいセレクタを指定する - ＃（ 'H1'）またはクラスで。

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

http://jsfiddle.net/cQjsu/

Answer 2

そのような何か試してみてください。（このような質問にちょっと重要であろう）コードを見ることなく

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

Answer 3

を、最高の推測では、あなたが正しくHTMLを解析します.text()代わりの.html()を使用しているということです。

Answer 4

これはいくつか整理して行うことができますが、これは良い開始点になるかもしれません：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

ニースと短い：

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

しかし$("body")は非常に高価なセレクタであることに留意してください。より正確な親ターゲットを検討する必要があります。

Demo here (fiddle)