Switching from regex literals to RegExp constructor

问题

I'm trying to make a JS function that select all the words beginning with a variable word (3 or 4 letters), and then bold them. I found a suitable regex here but when I try to tweak it (particularly when I use new RegExp), it doesn't work anymore.

A JSfiddle is here.

Thanks for your help!

Here is the HTML code:

<div id="text1">#hallo, this is a test #john #doe with myWordOfTheYear</div>
<input type="text" id="input1" onkeyup="searchC(this.value);searchD(this.value);" size="100"/> <br />
Result of searchA function: <div id="testA"></div>
Result of searchB function: <div id="testB"></div>
Result of searchC function: <div id="testC"></div>

<script>searchA();searchB();</script>

And the JS part:

//function created from http://jsfiddle.net/BUC7L/
function searchA() {
    var s = document.getElementById('text1').innerHTML ;
    var re = /(?:^|\W)#(\w+)(?!\w)/g, match, matches = [];
    while (match = re.exec(s)) {
      matches.push(match[0]);
    }
    document.getElementById('testA').innerHTML = matches;
}

//function where I just tried to rewrite it with 'RegExp'. This function does not work
function searchB() {
    var s = document.getElementById('text1').innerHTML ;
    var re = new RegExp("(?:^|\W)#(\w+)(?!\w)",g);
    var match, matches = [];
    while (match = re.exec(s)) {
      matches.push(match[0]);
    }
    document.getElementById('testB').innerHTML = matches;
}

//function that shows a bit more my goal but does not work.
function searchC(wordInput) {
    var s = document.getElementById('text1').innerHTML ;
    var re = new RegExp("(?:^|\W)"+wordInput+"(\w+)(?!\w)","g");
    var match, matches = [];
    while (match = re.exec(s)) {
      matches.push(match[0]);
    }
    document.getElementById('testC').innerHTML = matches;
}

//function that shows my specific goal but does not work.
function searchD(wordInput) {
    var s = document.getElementById('text1').innerHTML ;
    var re = new RegExp("(?:^|\W)"+wordInput+"(\w+)(?!\w)","g");
    document.getElementById('text').innerHTML.replace(re,'<b>'+re+'</b>'); //I know this line cannot work but I don't manage to find a way to do it, it's just to show what I want..
}

回答1:

You need to escape the backslashes used for character classes when used in a string pattern. Otherwise, JavaScript's string literal parsing will turn "\W" into the string "W" (since it's not a recognized escape sequence), which is of no particular significance to the RegExp constructor and just matches W.

You also need to quote the flag argument; a bare g looks like a symbol, not the string it needs, and there is presumably no variable by the name of g, so it just passes in undefined.

Note that regex literal syntax, such as in searchA, does not use strings at any step and therefore does not use any of this. The constructor is most useful for cases where the string is coming from somewhere else: user input, config files, string concatenation with some existing data, or whatever.

In searchB, therefore, the correct syntax is this:

    var re = new RegExp("(?:^|\\W)#(\\w+)(?!\\w)", "g");

回答2:

You need to escape twice and g needs to be a string:

var re = new RegExp("(?:^|\\W)#(\\w+)(?!\\w)",'g');

来源：https://stackoverflow.com/questions/27626017/switching-from-regex-literals-to-regexp-constructor