Question

出于品牌推广的原因，我希望每次出现在标题中时，我的网站标题都会以其他内容的唯一字体显示。为简单起见，让我们假装我的特殊字体是Courier，我的公司叫做SparklePony。所以，像一条线，

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

会在我的网站默认字体Arial中显示Courier和董事会中SparklePony一词的标题。（是的，我知道这很可怕。）

我尝试过使用jQuery字符串替换，但我不想替换字符串，我只想在Courier中看到它（只为那个单词添加一个类，或者某个东西）用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

如果没有看到代码（在这样的问题中会有点重要），最好的猜测是你使用.text()而不是.html()来正确解析HTML。

Answer 3

它可以做一些整理，但这可能是一个很好的起点：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 4

尝试类似的事情：

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

Answer 5

好又短：

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

但请记住，$("body")是一个非常昂贵的选择器。您应该考虑更精确的父目标。

Demo here (fiddle)

更改所有出现的字符串的样式

5 个答案: