2012-05-24 21 views
0

代碼下方的屏幕截圖顯示了我的問題。它只會使文字的一個實例變成彩虹。Javascript/ActionScript爲每個indexOf做些什麼?

我怎樣才能得到這個代碼做每個[彩虹]指定[/彩虹]文本?

它實際上是爲ActionScript,但它的工作原理在了Javascript,所以我一直在http://jsfiddle.net

var txt = "This is a [rainbow]test to show that I can[/rainbow] make whatever I want [rainbow]appear as a rainbow[/rainbow] because I am [rainbow]awesome[/rainbow]."; 

if ((txt.indexOf("[rainbow]") > -1) && (txt.indexOf("[/rainbow]") > -1)) { 
    var firstChar = txt.indexOf("[rainbow]") + 9; 
    var lastChar = txt.indexOf("[/rainbow]"); 

    var RAINBOWTEXT = ''; 
    var i = firstChar; 

    while (i < lastChar) { 
     RAINBOWTEXT += txt.charAt(i); 
     i++ 
    } 
    var text = RAINBOWTEXT; 
    var texty = ''; 

    colors = new Array('ff00ff', 'ff00cc', 'ff0099', 'ff0066', 'ff0033', 'ff0000', 'ff3300', 'ff6600', 'ff9900', 'ffcc00', 'ffff00', 'ccff00', '99ff00', '66ff00', '33ff00', '00ff00', '00ff33', '00ff66', '00ff99', '00ffcc', '00ffff', '00ccff', '0099ff', '0066ff', '0033ff', '0000ff', '3300ff', '6600ff', '9900ff', 'cc00ff'); 
    var i = 0; 

    while (i <= text.length) { 
     var t = text.charAt(i); 

     if (t != undefined) { 
      texty += "<font color=\"#" + colors[i % colors.length] + "\">" + t + "</font>"; 
      i++; 
     } 
    } 

    texty = texty.replace("> <", ">&nbsp;<"); 
    var REPLACEME = "[rainbow]" + RAINBOWTEXT + "[/rainbow]"; 
    txt = txt.replace(REPLACEME, texty); 
    document.write(txt); 
}​ 
測試

enter image description here

回答

1

使它成爲一個循環。 .indexOf可以將起始點作爲第二個參數,因此在開始下一個迭代lastChar+10時應該起作用。

除此之外,它可能是更容易與正則表達式和.replace完全做到這一點:

return txt.replace(/\[rainbow\](.+?)\[\/rainbow\]/g, function(all, match, index, str) { 
    return createRGBrainbowArray(match.length).map(function(color, i) { 
     return '<span style="color:#'+color+'">'+match[i]+'</span>'; 
    }).join(""); 
}); 
function createRGBrainbowArray(l) { 
    // should return an Array of length l with hexadecimal color strings, 
    // representing a nice rainbow 
} 
3

如果我們可以對無交錯或[rainbow]標籤嵌套的假設,我只是使用正則表達式用一個簡單的replacer callback

var rainbowified = txt.replace(/\[rainbow\](.*?)\[\/rainbow\]/, function(textWithTags, textBetweenTheseTags) { 
    var text = textBetweenTheseTags; 
    .... 
    for(var i = 0; i < text.length; ++i) { 
     // rainbowify each letter of text... 
    } 
    ... 
    return textWithFontTags; 
} 

你可以使用它來獲得一個新的字符串與你想要的轉換。

此外,font標記被刪除;您應該在style屬性中使用span並使用color:#XXXXXX

2
var colors = [ 
    'f0f', 'f0c', 'f09', 'f06', 'f03', 'f00', 'f30', 'f60', 'f90', 'fc0', 
    'ff0', 'cf0', '9f0', '6f0', '3f0', '0f0', '0f3', '0f6', '0f9', '0fc', 
    '0ff', '0cf', '09f', '06f', '03f', '00f', '30f', '60f', '90f', 'c0f' 
]; 
function rainbowify(text) { 
    return text.replace(/\[rainbow\](.*)\[\/rainbow\]/g, function(_, inner){ 
    return inner.replace(/./g, function(ch, i){ 
     return '<span style="color:#' + colors[i % colors.length] + ';">' + ch + '</span>'; 
    }); 
    }) 
} 

這是我該怎麼做的。