Question

我正在尝试使用javascript在我的网页上替换特定div中每个字母的颜色。

我在论坛上发现了这个脚本，它使用表单选择替换div的单词颜色：

<script type="text/javascript" language="javascript">
var HTML = '';

    function alternate(colorpair) {
    var el = document.getElementById('alternator');
        if (!HTML) HTML = el.innerHTML;
            colorpair = colorpair.split('|');
            var text = HTML.split(' '), output = '';
            for (var w=0; w<text.length; w++) {
                output += '<span style="color:' + ((w%2) ? colorpair[0] : colorpair[1]);
                output += ';">' + text[w] + '</span> ';
            }
            el.innerHTML = output;
        }
    </script>

这是跟随它的HTML：

    <div id="alternator" class="none">
        This is how the line of text should look after the alternating color effect is applied. And so on, and so forth....
    </div>
    <br /><br />
    <form>
        <select style="font:200 11px arial;color:white;background:#333333;" onchange="alternate(options[selectedIndex].value)">
            <option>select colors</option>
            <option value="red|yellow">red & yellow</option>
            <option value="coral|olive">coral & olive</option>
            <option value="green|purple">green& purple</option>
            <option value="gold|silver">gold & silver</option>
            <option value="skyblue|darkorange">skyblue & dark orange</option>
        </select>
    </form>

如上所述，此脚本使用表单来更改字词的颜色。

我可以更改此设置，以便字母在页面加载时自动替换吗？

Answer 1

这是一种方法，只需用以下内容替换您的JavaScript代码（并从HTML中删除表单，因为您只是希望在页面加载时发生这种情况）：

var HTML = '';

function alternate(colorpair) {
    var el = document.getElementById('alternator');
    if (!HTML) HTML = el.innerHTML;
    var text = HTML.match(/\S\s*(?=\S)/g), output = '';
    for (var w=0; w<text.length; w++) {
        output += '<span style="color:' + ((w%2) ? colorpair[0] : colorpair[1]);
        output += ';">' + text[w] + '</span>';
    }
    console.log(output);
    el.innerHTML = output;
}
alternate(['green', 'purple']);

请注意，使用此方法，您还可以跳过空格，以便着色看起来更好一点。以下是最终结果：

enter image description here

示例：http://jsfiddle.net/pzeCQ/

Answer 2

问题＃1：无需在函数范围之外定义var HTML。根本不需要定义它。

问题＃2：你正在分裂一个空格''，它会替换单词，而不是字母。

问题＃3：你没有剥离现有的标签，所以如果你选择一个颜色对，然后选择另一个颜色对，你就会将html放入你的文本中。

问题＃4：如果你选择'选择颜色'，它会在尝试获取不存在的colorpair [1]时抛出错误

问题＃5：你在每个字母的末尾添加空格，这会打破进一步的尝试，因为每个交替的字符都是一个空格。你只会看到一种颜色！：P

固定代码：

function alternate(colorpair) {
    if(colorpair.indexOf('|') == -1) return;
    var el = document.getElementById('alternator');
    colorpair = colorpair.split('|');
    var letters = el.innerHTML.replace(/^\s*|\s*$/g,''). /*strip leading/trailing spaces*/
                  replace(/<[^>]*>/g,''). /*strip existing html tags */
                  split(''), 
        output = '';
    for (var w = 0, l = letters.length; w < l; w++) {
        output += '<span style="color:' + ((w % 2) ? colorpair[0] : colorpair[1]) + ';">' + letters[w] + '</span>';
    }
    el.innerHTML = output;
}

JSFiddle演示：http://jsfiddle.net/xpZqs/

Answer 3

替换它：

var text = HTML.split(' '), output = '';
for (var w=0; w<text.length; w++) {
    output += '<span style="color:' + ((w%2) ? colorpair[0] : colorpair[1]);
    output += ';">' + text[w] + '</span> ';
}

有了这个：

for (var c=0; c<HTML.length; c++) {
    output += '<span style="color:' + ((c%2) ? colorpair[0] : colorpair[1]);
    output += ';">' + HTML.CharAt(c) + '</span> ';
}

输出结果非常详细。如果你想跳过空格，你需要为它添加一点逻辑。

Answer 4

我有一个简单的演示：

这假设文本已经在页面上，只影响文本（使用innerText），并用必需的html替换div中的文本

function alternateColours() {
    var div = document.getElementById("alternator");
    var message = div.innerText;
    html = "";
    var colors = new Array("#ff0000","#00ff00","#0000ff"); // red, green, blue
    for (var i = 0; i < message.length; i++)
        html += "<span style=\"color:" + colors[(i % colors.length)] + ";\">" + message[i] + "    </span>";
    div.innerHTML = html;
}
alternateColours();

我建议使用jQuery将函数附加到页面加载，更加清晰，必须自己完成。

如何使用javascript在网页上替换字母颜色？

4 个答案: