Javascript / ActionScript为每个indexOf做什么？

Question

代码下方的屏幕截图显示了我的问题。它只会使一个文本实例变为彩色。

如何让这段代码完成每个[rainbow]指定的[/ rainbow]文本​​？

它实际上适用于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);
}​

Answer 1

如果我们可以假设没有[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标签已被删除;您应该在span属性中使用color:#XXXXXX style。

Answer 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>';
    });
  })
}

我是这样做的。

Answer 3

让它循环。 .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
}