Question

我想编写一个JavaScript函数，将一些简单的BBcode标签（如[red] [/ red]）转换为Html-Tags。我认为replace（）函数是最好的方法。我写了一个简单的测试函数来尝试它，但它似乎没有用。

/**
* @function
* @description Replaces the bb-tags with html-tags
*/
function bbToHtml(form) {
    debugger

    var text = form.text.value;
    bbTags = new Array("[red]", "[yellow]", "[green]", "[/red]", "[/yellow]", "[/green]");
    htmlTags = new Array("<font color='red'>", "<font color='yellow'>", "<font color='green'>", "</font>", "<font>", "</font>");

    for (var i = 0; i < bbTags.length; i++) {
        var re = new RegExp(bbTags[i], "g");
        text = text.replace(re, htmlTags[i]);
    }

    alert(text);
}

它应该将"[red]hello[/red]"转换为"<font color='red'>hello</font>"，但它只会给我一个奇怪的字符串。

有什么问题？我认为这与我的正则表达式有关。

Answer 1

[和]在正则表达式中具有特殊含义，需要进行转义，而且您不需要像编写代码那样使用正则表达式，而且可以这样做：

function bbToHtml(form) {
    debugger

    var text = form.text.value;
    bbTags = new Array("[red]", "[yellow]", "[green]", "[/red]", "[/yellow]", "[/green]");
    htmlTags = new Array("<font color='red'>", "<font color='yellow'>", "<font color='green'>", "</font>", "<font>", "</font>");

    for (var i = 0; i < bbTags.length; i++) {
        while(text.indexOf(bbTags[i])!==-1){
            text = text.replace(bbTags[i], htmlTags[i]);
        }
    }

    alert(text);
}

只是为了让您知道，您可以使用数组文字而不是数组。 new Array(comma seperated values)与javascript中的[comma seperated values]相同。此外，您可以像在地图中一样使用数组，例如：

var bbTagsToHTML = {}
bbTagsToHtml["[red]"] = "<font color='red'>"

并循环使用。

如果您希望也可以逃避正则表达式，请参阅How do you use a variable in a regular expression?以获取执行此操作的功能。

您也可以手动执行此操作。 "[red]"变为"\[red\]"（括号转义）。

Answer 2

只需更改此行

text = text.replace(re, htmlTags[i]);

进入

text = text.replace(bbTags[i], htmlTags[i]);

删除无用的代码。

replace也可以将'normal'（非正则表达式）值作为参数。

Answer 3

如果你想用正则表达式做，你可以简化很多。没有数组或循环：

var str = '[red]foo[/red] hello world [blue]hey[/blue]',
    re = /\[(\w+)\](.*)\[\/\1\]/g;

str = str.replace(re, '<font color="$1">$2</font>');

console.log(str);
//^ <font color="red">foo</font> hello world <font color="blue">hey</font>

另外，作为附注，font很少被使用，我建议你在课堂上使用span。

用数组元素上的RegEx替换（）

3 个答案: