为 HTML 文档中的字母、数字着色答案

【问题标题】：Colouring letters, numbers in HTML document为 HTML 文档中的字母、数字着色
【发布时间】：2015-11-30 20:13:19
【问题描述】：

如何在 html 文档中按字母（也可以按数字和任何符号）为文本添加样式（颜色），并为每个字母应用定义的颜色。

认为您有grapheme-color synesthesia，在这种情况下我有，并且想要制作一个文本编辑器，并将您的颜色应用于字形。虽然有现成的程序，但我想自己做一个并练习我的 JavaScript 技能。以后我也在计划一个读者。

一种方法是将html元素中的每个字母包装在另一个元素中，比如span，并通过与包装字母名称相关的类名应用样式。我也会在 React Native 应用程序中使用相同的想法。

还有其他更有效或更合适的方法来实现这一点吗？

【问题讨论】：

标签： javascript html css reactjs react-native

【解决方案1】：

带有替换的基本正则表达式以添加跨度。你可以用函数替换字符串，这样你就可以做一些更动态的事情来确定颜色。

var ps = document.querySelectorAll("p");
[].forEach.call(ps, function (elem) {
  elem.innerHTML = elem.innerHTML.replace(/(\S)/g, "<span>$1</span>");
});

span { 
  display: inline-block;
  border: 1px solid black;
  width: 20px; text-align: center;
}

<p>Mary had a slice of bacon. It cost $0.75 and tasted great.</p>
<p>Bill had no bacon. He was sad!</p>

除了循环和替换，我认为没有其他方法。

【讨论】：

【解决方案2】：

以下是参考链接，

在 referenced 示例中

更改这个 span 标签， IE。而是 background 在 style 标签

中提供 color

<span style="color:'+bgColor+'">'+ text.charAt(i) +'</span>

和

更改 css 背景：白色

Reference link

【讨论】：