在整个网站上更改特定单词的 css？答案

【问题标题】：Change a specific word's css across the site?在整个网站上更改特定单词的 css？
【发布时间】：2014-05-12 13:52:12
【问题描述】：

我想在整个站点中更改特定单词的 css。我无法在该单词周围添加任何 html 元素（例如 span、div），因为该单词在站点上多次使用并且在许多地方使用。

是否可以通过 css 进行更改？

【问题讨论】：

看看这个codepen.io/FWeinb/pen/djuIx
是的，我敢肯定，这个问题已经有一些重复了。编辑 - 如果你只想要 CSS，为什么要使用 JS 标记？
我没有找到任何问题
“我无法在该词周围添加任何 html 元素（如 span、div），因为该词在网站上多次使用且在许多地方使用。” 然后呢？这就是全局搜索和替换派上用场的地方，无论是在 IDE 中，还是使用 sed 等。
@Jan.J 我真的很想知道这支笔如何解决手头的问题。它使用像nth-letter这样的选择器，在一个网站中，你如何使用这些来找出特定单词的位置..？？

标签： javascript html css text

【解决方案1】：

您不能仅使用 CSS 来做到这一点。所以你的选择是：

您说您“不能”做的事情 - 编辑源文件，例如全局搜索和替换。在该类的单词和样式周围放置一个带有相关类的跨度。
使用 JavaScript 以追溯方式将单词包含在元素中（span 可能是最好的），再次在其上使用类并设置该类的样式。

如果您使用 jQuery，this answer 可以帮助您轻松地用 span 包装特定的单词。如果你不这样做，this other answer 会告诉你怎么做。

【讨论】：

我无法编辑源文件，因为我真的不知道这个词出现了多少次
@AnkitAgrawal：这没有任何意义。您找出多少次，使用（再次）全局搜索和替换。全局搜索（以及变体、全局搜索和替换）是绝对基本的编程工具。

【解决方案2】：

我担心纯 CSS 解决方案不适合您。我只能提供一个 JavaScript 解决方案，它将为您将目标词包装在标签中。

Demo on jsfiddle

var styleWord = function(target, word)
{
    var html = target.innerHTML;
    html = html.replace(new RegExp(word, "g"), '<span class="styled">'+word+'</span>');
    target.innerHTML = html;
};

我编写的函数有两个参数：您希望更改单词的目标元素（它不会单独留下 HTML 标记和属性，因此您可能需要对其进行优化）和您要查找的单词。它会将单词包装在 span 中，因此您可以按照自己的意愿设置样式。

【讨论】：

请注意，如果在您进行替换之前已连接后代元素，这将彻底清除后代元素上的事件处理程序。
@T.J.Crowder 是的，它会的。这是一个愚蠢的单行代码，旨在以更简单的方式编写。恐怕我目前无法编写完整的 JS 插件：)。并感谢您的第二条评论；确实，我不小心删除了 var 声明。