html - 如何使用 CSS 为容器中的特定单词着色

Question

假设我有一个容器:

 <div id="container"> This is a red apple </div>

如何用红色给单词“red”上色？ 像(伪代码)

#container:[word="red"]{
   color:red;
}

在不引入 JavaScript 或修改现有 HTML 的情况下，是否可以在纯 CSS 中执行此操作？

Answer 1

背景

这是一个 Vanilla JavaScript 解决方案，因为 CSS 是不可能的。不是开玩笑，请阅读 specification.您可以匹配元素、元素中属性的名称以及元素中命名属性的值。不过，我没有看到任何与元素内的内容匹配的内容。

介绍

这是我的尝试。我确信有一种更时尚的方式，但这是它如何开始的要点。此外，由于您想要colorify 的颜色数量有限，因此最好像我一样使用一堆if 语句。

当然，更好的技术是通过构建颜色字典以编程方式进行更多操作，从而使代码井井有条。但这有效，而且它是 Vanilla JS。显然，我没有正则表达式方面的专业知识，所以我确信几行是不必要的。

特点

• 适用于多种颜色出现
• 适用于可见的多种颜色

http://jsfiddle.net/TB62H/5/

var text = document.getElementById("content");
var str = text.innerHTML,
    reg = /red|blue|green|orange/ig; //g is to replace all occurances

//fixing a bit
var toStr = String(reg);
var color = (toStr.replace('\/g', '|')).substring(1);

//split it baby
var colors = color.split("|");

if (colors.indexOf("red") > -1) {
    str = str.replace(/red/g, '<span style="color:red;">red</span>');
}

if (colors.indexOf("blue") > -1) {
    str = str.replace(/blue/g, '<span style="color:blue;">blue</span>');
}

if (colors.indexOf("green") > -1) {
    str = str.replace(/green/g, '<span style="color:green;">green</span>');
}

if (colors.indexOf("orange") > -1) {
    str = str.replace(/orange/g, '<span style="color:orange;">orange</span>');
}


document.getElementById("updated").innerHTML = str;

结果