javascript - 用 HTML 标签包围字符

Question

我想替换 javascript 中的文本。例如文本是：< + class abc > -

我想要结果：

<span class="operators"> < </span><span class="operators"> + </span>
<span class="keywords">class</span> abc <span class="operators"> > </span>
<span class="operators"> - </span>

第二个替换规则确实也替换了 < 和 >，以及 HTML 标记中的 class 属性。我怎么解决这个问题？

Answer 1

非常基本的例子：

var operators = ["<", "+", "-", ">"],
    keywords  = ["class"];

"< + class abc > -".replace(/[^ ]+/g, function(m) {
    if (operators.indexOf(m) > -1)
        return '<span class="operators">' + m + '</span>';
    else if (keywords.indexOf(m) > -1)
        return '<span class="keywords">' + m + '</span>';
    return m;
});

演示：http: //jsfiddle.net/6Np26/

Answer 2

尝试

var x = '< + class abc > -';
var array = x.split(/\s/);

var ops = /^[<>+-\/]$/;
var keywords = /^(class)$/

var result  = [];
for(var i = 0; i <  array.length; i++){
    var item =  array[i];
    if(ops.test(item)) {
        result.push('<span class="operators"> ' + item + ' </span>')
    } else if(keywords.test(item)){
        result.push('<span class="keywords"> ' + item + ' </span>')
    } else {
        result.push(item)
    }
}

console.log(result.join(' '))

演示：小提琴