javascript - CSS和/或Javascript中给定文本中俄语字母表的每个字符的不同颜色

Question

我正在尝试通过按单个字符为文本着色来测试“诱发联觉”。俄语字母表中的每个字符都应映射到一种颜色，例如Ａ是红色，Ｂ是蓝色等等，所以总共有33种颜色。这个过程应该是自动的。

我的想法是将整个文本放在 div 中元素并在 Javascript 中获取它，然后将每个字符分开并放置一个 <span class="letter">用正确的字母围绕它，所以对于单词“два”，最终文本将是这样的:

<div class=text>
    <span class="д">д</span><span class="в">в</span><span class="а">а</a>
</div>

问题是，是否有更好和/或更短的方法来做到这一点？我想一个足够大的文本甚至会使浏览器崩溃。

Answer 1

虽然您可以轻松地用 HTML 中的 span 包裹每个字母，但如果有很多字母，下面的解决方案会有所帮助，否则如果您想节省时间，请在控制台中运行此功能以立即将 span 包裹到每个字母一个类名。

function addClassToLetters(element) {
    // runs if the passed element has no children elements in it.
    if (!element.children.length) {
        return element.innerHTML.replace(/(.)/g, function (x) {
            return "<span class='" + x + "'>" + x + "</span>";
        });
    }
    else{
        // do something if the element has child elements in it
        // or return the original html
    }
}