javascript - 给 HTML 文档中的字母、数字着色

Question

如何为 html 文档中的文本逐个字母地(通过数字和任何符号)添加样式(颜色)，并为每个字母应用定义的颜色。

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

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

有没有其他更有效或更合适的方法来实现这一目标？

Answer 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>

除了循环和替换，我认为没有其他方法可以做到这一点。