JavaScript - 使用RegExp使用多个关键字的问题

Question

我正在尝试使用JavaScript为Java代码创建语法高亮系统。到目前为止，我已经弄清楚如何为单个单词着色，但是当我尝试着色多个单词时，它会将原始单词替换为新关键字。这是一个图片示例：

＆＃34; main＆＃34;在一开始应该说是公开的。如何为多个关键字执行JavaScript RegExp并仍保留我的文本？代码：http://jsfiddle.net/vtnd02e7/

<h3>Original Text</h3>
<textarea id="origtext">
</textarea>
<button onclick="colorize()">Colorize</button>

<h3>Colorized Text</h3>
<pre id="newtext"></pre>

<script>
function colorize() {
    var str = document.getElementById("origtext").value;
    var newstr = str.replace(/(main)|(public)/gi, "<span style='color:red;'>main</span>");
    document.getElementById("newtext").innerHTML = newstr;
}
</script>

Answer 1

使用相同的捕获组并将捕获的值放入字符串中，例如

var newstr = str.replace(
    /(main|public)/gi,
    "<span style='color:red;'>$1</span>"
);

或者使用函数作为.replace的第二个arg，它有一些选择逻辑，例如

var newstr = str.replace(
    /(main)|(public)/gi,
    function ($0, $1, $2) {
        return "<span style='color:red;'>" + ($1 || $2) + "</span>";
    }
);