从正则表达式文字转换为RegExp构造函数 [英] Switching from regex literals to RegExp constructor

问题描述

我正在尝试制作一个JS函数，该函数选择所有以可变词（3或4个字母）开头的词，然后将其加粗。我在此处找到了合适的正则表达式但是当我尝试对其进行调整时（尤其是当我使用 new RegExp 时），它不再起作用。

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.

JSfiddle在此处。

A JSfiddle is here.

谢谢您的帮助！

以下是HTML代码：

<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>

和JS部分：

//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..
}

推荐答案

在字符串中使用时，您需要转义用于字符类的反斜杠模式。否则，JavaScript的字符串文字解析将把 \W 转换为字符串 W （因为它不是识别的转义序列），对 RegExp 构造函数没有特别的意义，只匹配W。

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.

需要引用标志参数；裸露的 g 看起来像是一个符号，而不是它所需要的字符串，并且g的名称可能没有任何变量，因此它只是传入未定义。

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.

请注意，正则表达式文字语法（例如在searchA中）在任何步骤都不会使用字符串，因此不会使用任何此类。在字符串来自其他地方的情况下，构造函数最有用：用户输入，配置文件，字符串与一些现有数据的连接或其他内容。

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.

在searchB中，因此，正确的语法是这样的：

In searchB, therefore, the correct syntax is this:

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

这篇关于从正则表达式文字转换为RegExp构造函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！