5

出于品牌原因，我希望每次出现在标题中时，我的网站标题都以与其余内容不同的字体显示。为简单起见，假设我的特殊字体是 Courier，而我的公司名为 SparklePony。所以，像这样的一条线，

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

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

我尝试过使用 jQuery 字符串替换，但我不想替换字符串，我只想在 Courier 中看到它（只为那个词添加一个类，或者类似的东西。）替换SparklePony导致<span class="sparkle-pony">SparklePony</span>整个带有标签的丑陋字符串以及要在我的网站上显示的所有内容，而不是添加类。

我的字符串替换有问题吗，还是有更好的方法来设置所有出现的字符串？

4

5 回答 5

7

你可以这样做 - 指定你想要的选择器 - #('h1') 或按类。

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

http://jsfiddle.net/cQjsu/

于 2012-12-20T20:39:49.900 回答
2

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

于 2012-12-20T20:33:26.940 回答
2

它可以做一些整理，但这可能是一个很好的起点：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;
};
于 2012-12-20T20:38:25.740 回答
1

尝试这样的事情：

$.each($(".title"),function({
$(this).html($(this).html().replace("SparklePony","<span class='sparkle-pony'>SparklePony</span>"))
});
于 2012-12-20T20:33:08.220 回答
1

又好又短：

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

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

演示在这里（小提琴）

于 2012-12-20T20:41:55.243 回答