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

Question

说我有div显示如下文字：

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

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

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

我怎么能这样做，这可能吗？

Answer 1

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

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

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

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

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