Question

我有一个Podunk公司的网页。但每次Podunk出现在页面上（无论它在哪里）都需要显示为 Podunk！

请注意，这在页面上是任意的，因此它可以位于标题标记，列表标记，多个嵌套DIV等中。

最好的方法是什么？我认为jQuery是更好的解决方案（而不是CSS），但我不知道如何去做？有人可以在整个页面元素上提供这种替换的代码片段。

Answer 1

我的原始答案不正确（正如评论中所指出:)）我已编辑此答案以包含正确的解决方案。

var rgx = /Podunk/g;
$("body *")
    .contents()
    .filter(function() {
        if (this.nodeType !== 3){
            return false;
        }
        return true;
    })
    .each(function(){
        var $this = $(this);
        var txt = $this.text();
        if (rgx.test(txt)){
            $this.replaceWith("<span>" + txt.replace(rgx,"<span class='podunk'>Podunk</span>") + "</span>");
        };
    });

这有一个缺点，即任何只有Podunk的元素都会获得额外的span元素。即，如果你有

<a>Podunk</a>

你最终得到了

<a><span><span class="podunk">Podunk</span></span>.

我认为可以通过一些考虑来解决这个问题。

Answer 2

如果需要以斜体显示，绝对最可靠的方法是使用<i>Podunk</i>并尽最大努力确保使用的字体系列具有斜体字体。

无论如何，这是一个误入歧途的目标，所以你不应该担心同事说i标记不是“语义”。但是你可能会考虑使用<i class=company>Podunk</i>，只是为了让客户更容易理解斜体的使用，而不会丢掉斜体的合理使用，如果客户能够理解的话。

每次出现在页面上时都会显示一个单词？

2 个答案: