Javascript 更改字符串所有引用的样式

我想我的网站标题显示在一个独特的字体，从其余的内容，每次它出现在一个标题，为品牌的原因。为了简单起见，让我们假设我的特殊字体是Courier，我的公司叫SparklePony。那么像这样的一条线,

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

SparklePony董事会

将在Courier和Board of Directors中以我的网站默认字体（Arial）显示标题，标题中使用SparklePony一词。（是的，我知道这会很可怕。）

我尝试过使用jQuery字符串替换，但我不想替换字符串，我只想在Courier中看到它（为该单词添加一个类，或者类似的东西。）用

SparklePony

替换

SparklePony

导致整个丑陋的带有标签的字符串以及我网站上显示的所有内容，而不是添加类

---

我的字符串替换是否有问题，或者是否有更好的方法来设置字符串所有出现的样式？

尝试类似的方法：

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

$。每个（$（“.title”）函数({
$（this.html（$（this.html（）.replace（“SparklePony”，“SparklePony”））
});

在没有看到代码的情况下（这在这样的问题中有点重要），最好的猜测是您使用的是

.text（）

而不是

.html（）

，这将正确解析html。

这可能需要一些整理，但这可能是一个很好的起点：

HTML

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;
};

function highlightText（元素、短语、异变、区分大小写）{
var修饰符=（所有发生率？'g'：''）+（区分大小写？''i'）；
var text=element.innerHTML；
element.innerHTML=text.replace（新的RegExp（短语、修饰符）、function（匹配）{
返回“”+匹配+“”；
});
}
var button=document.getElementById（'clickme'）；
var el=document.getElementById（'title'）；
button.onclick=函数（）{
highlightText（el，‘突出显示此’，真、假）；
button.onclick=null；
};

您可以这样做-指定所需的选择器-#（'h1'）或按类

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

$（'.title'）.html（函数（i，v）{
返回v.替换（/SparklePony/g，'SparklePony'）；
});
​

又漂亮又短：

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

var$body=$（“body”）；
$body.html（$body.html（）.replace（/SparklePony/ig，“SparklePony”）；​

<>但请记住，<代码> $（“正文”）是一个非常昂贵的选择器。您应该考虑更精确的父对象。

---

你用来替换的代码是什么？你替换了innerHTML吗？我现在把它限制在h1的范围内。我明白了。

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

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