CSS如何自动更改某些字符的字体颜色？答案

【问题标题】：CSS how can I change some character's font color automatically?CSS如何自动更改某些字符的字体颜色？
【发布时间】：2018-09-25 17:03:11
【问题描述】：

假设我有一个div，它显示了一些这样的文本：

<div id="some_text">abc_123+xyz</div>

我想将单个字符的颜色设置为 RED，如果它既不是数字也不是字母。

这是我用来识别数字和字母字符的正则表达式：[0-9A-Za-z]，但我现在卡住了......

我该怎么做，这可能吗？

【问题讨论】：

据我所知，仅使用 CSS 是不可能的。
我认为你必须给我们 JS 或将字符包装在 spans 中。

标签： css fonts colors

【解决方案1】：

不可能只使用 CSS，因为字符不在可以设置样式的单独元素中。

您必须添加一些 JavaScript 来创建所需的元素，例如：

const div = document.getElementById('some_text');

div.innerHTML = div.innerHTML.replace(
    /([^a-z0-9])/gi,
    '<span style="color: red">$1</span>'
);

&lt;div id="some_text"&gt;abc_123+xyz&lt;/div&gt;

【讨论】：

通过javascript解决很快，谢谢~