如何在使用javascript的網頁上替換字母顏色？

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

問題＃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 2

替換此：

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 3

這裏是要做到這一點，只是替換你的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']); 

注意與這種方法，你也將跳過空格，使着色看起來更好一點。下面是最終的結果是這樣的：

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

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將該功能附加到頁面加載，更乾淨，必須自己做。