Question

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

认为你有grapheme-color synesthesia，在这种情况下我有，并希望制作一个文本编辑器，将颜色应用于字形。虽然有准备好的程序，但我喜欢自己做一个并练习我的JavaScript技能。后来我也在计划读者。

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

还有其他更有效或更正确的方法来实现这一目标吗？

Answer 1

使用replace添加跨度的基本正则表达式。您可以使用函数替换字符串，以便您可以执行更动态的操作来确定颜色。

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>

除了进行循环和替换之外，我认为没有其他方法可以做到。

Answer 2

以下是参考链接

引用示例中

更改此 span标记，即。而背景在样式标记中提供颜色

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

和

更改 css 背景：白色

Reference link

着色字母，HTML文档中的数字

2 个答案: