html - 将 CSS 应用于单个单词

Question

是否有可能以这样一种方式应用 CSS，它会检测元素中是否有某个单词并以某种方式标记该单词？我知道我可以添加<span style="...">word</span>或<span class="...">word</span>内联 HTML，但这不会自动检测到这个词。有没有办法完全在 CSS 中做到这一点？任何帮助表示赞赏。

Answer 1

仅在 css 中没有办法做到这一点。您可以使用包装版本替换单词的所有实例，并根据您的示例http://jsfiddle.net/w9VbP/应用样式：

js

var word = 'hello';
var replacement = '<span class="theword">' + word + '</span>';

var re = new RegExp(word, 'ig');

document.body.innerHTML = document.body.innerHTML.replace(re, replacement);

css

.theword
{
    color:red;
}

Answer 2

您可以使用 jQuery 轻松完成。我将正文的 html 标记存储在var text并替换sample并<span class="change">sample1</span>放回正文的更新 html 标记。显然，您必须将此 jQuery 放在 html 的 head 部分，否则samplejQuery 函数中的字符串也将被替换与<span class="change">sample1</span>.

jQuery 函数

$('body').each(function() {
    var text = $(this).html().replace(/sample/g,'<span class="change">sample1</span>');
    $(this).html(text);
});

的CSS：

.change{
color:red;
background:blue;
}

工作的jsFiddle