使用 jQuery 定位单词并添加样式

Question

所以，这可能是一个简单的问题，但我的 jQuery 技能（还）还不够。我正在尝试针对网页上的特定单词并为其添加样式。我试图定位的词在页面上出现多次。我搜索了一些，发现了这个：

<script>
    var divContent = document.getElementById("styled").innerHTML;
    divContent = divContent.replace("Bevestigd","<span class='styled'>Bevestigd</span>");
    divContent = divContent.replace("Geannuleerd","<span class='styled-r'>Geannuleerd</span>");
    divContent = divContent.replace("Pending","<span class='styled-p'>Pending</span>");
    document.getElementById("styled").innerHTML = divContent;
</script>

这行得通，有点……它只针对第一次遇到这个词，不会自己重复。我找到了许多代码来定位页面上的一个单词，但这个似乎效果最好......有没有可以帮助我的？

我缺少foreach 函数吗？

我也试过这个代码：

$('body').html(
    function(i,h){
        return h.replace(/(Nike)/g,'<span class="nike tm">$1</span>');
    });​

这似乎有点简单，但没有奏效......也许有人有这个或什么的sn-p？

Answer 1

这是您在 jquery 上完成的 js 代码。看看这个jsfiddle

$('#styled').html(function(i,v){    
       v=v.replace(/Bevestigd/g,'<span class="styled">Bevestigd</span>');
       v=v.replace(/Geannuleerd/g,'<span class="styled-r">Geannuleerd</span>');
       v=v.replace(/Pending/g,'<span class="styled-p">Pending</span>');
       return v;
    });

这是通过正则表达式完成的。 我们可以进一步扩展它。

例如。要使搜索不区分大小写，请使用/Bevestigd/gi 而不是/Bevestigd/g。