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

Different color to every character of the russian alphabet in a given text in CSS and/or Javascript

本文关键字：字符 颜色 字母表 俄语 CSS Javascript 文本      更新时间：2023-09-26

我正在尝试通过按单个字符为文本着色来测试"诱导联觉"。俄语字母表中的每个字符都应映射到一种颜色，例如 А 是红色，Б 是蓝色等等，因此总共有 33 种颜色。此过程应该是自动的。

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

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

问题是，有没有更好和/或更短的方法？我想足够大的文本甚至可能会使浏览器崩溃。

虽然您可以轻松地在 HTML 中用跨度包装每个字母，

但如果有很多字母，下面的解决方案会很有帮助，或者如果您想节省时间，请在控制台中运行此函数以立即将跨度包装到每个带有类名的字母。

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

这里有一个jQuery方法。

第一步：创建一个函数来拆分文本以跨越，就像您手动操作一样，但现在是动态的。
第二步：为跨度的类提供相应的字母。
第三步：为所有字母编写css以赋予它们各自的颜色。

这是代码：

.HTML： 

<div class="text">Test Message</div>

j查询 ：

$.fn.texter = function() {
    var letters = $(this).html().split(""),
        text = "";
    for (var i in letters) {
        text += "<span class='"+letters[i]+"'>"+letters[i]+"</span>";
    }
    $(this).html(text);
};
$(document).ready(function() {
    $(".text").texter();
});

.CSS：

.a {color: red;}
.b {color: green;}
.c {color: blue;}
.d {color: yellow;}
.e {color: magenta;}

这里有一个小提琴：http://jsfiddle.net/3d4j5cdq/

相关文章：