RegEx在匹配的单词周围放置标签 [英] RegEx to place tags around matched word

问题描述

我想在字符串中匹配的单词周围加上粗体标签。但是，我还需要能够在网址中找到匹配的单词。如果可能的话，我希望一切都有一个RegEx。

I want to put bold tags around words that match in a string. However, I also need to be able to find the matched words in a url. If possible I would like to have one RegEx for everything.

这是我到目前为止所尝试的：

Here's what I have tried so far:

我试过新的RegExp（（^ | \\））（+ match.join（'|'）+）（\\\\ | $），ig ）
和新的RegExp（'（\\b）（'+ match2.join（'|'）+'）（\\b） ）'，'ig'）

//keyword
var keyword = "Donec sed odio bacon dui.";
var match = ["donec", "bacon", "dui"]; //why does it ignore dui???

var reg1 = new RegExp("(^|\\s)(" + match.join('|') + ")(\\s|$)","ig");
//var reg1 = new RegExp('(\\b)(' + match.join('|') + ')(\\b)','ig');
var reg2 = "$1<b>$2</b>$3";

var keyword = keyword.replace(reg1, reg2);

console.log(keyword);

请帮助

推荐答案

问题在于重叠匹配。而 dui 这个词在它之后有一个句号（它不是空格，也不是字符串的结尾）。在第一个正则表达式的末尾使用单词边界：

The problem is with overlapping matches. And the word dui has a full stop after it (it is not a whitespace, nor end of string). Use a word boundary at the end of first regex:

var reg1 = new RegExp("(^|\\W)(" + match.join('|') + ")(?!\\w|(?:[^<]*</[^>]+)?>)","ig");
var reg2 = "$1<b>$2</b>";

请注意，而不是 \\b ，您可以使用（？！\\\\）否定前瞻而不是（^ | \\止）您可以使用（^ | \\ W）来确保不依赖关键字周围的空格。 （？！\\\\ |（？：[^<] *< / [^>] +）？>） lookahead将失败如果关键字恰好位于已标记的文本中，则匹配。

Note that instead of the \\b, you can use (?!\\w) negative lookahead and instead of (^|\\s) you may use (^|\\W) to make sure you do not depend upon whitespace around the keywords. The (?!\\w|(?:[^<]*</[^>]+)?>) lookahead will fail the match if the keyword happens to be inside an already tagged text.

第二个正则表达式需要单词边界，因为单词位于连字符之间：

The second regex requires word boundaries since the words are in between hyphens:

var reg3 = new RegExp("\\b(" + match2.join('|') + ")\\b(?!(?:[^<]*</[^>]+)?>)","ig");
var reg4 = "<b>$1</b>";

或更多样化：

var reg3 = new RegExp("(^|\\W)(" + match2.join('|') + ")(?!\\w|(?:[^<]*</[^>]+)?>)","ig");
var reg4 = "$1<b>$2</b>";

此外，您需要转义关键字的特殊正则表达式元字符，以便将它们视为字面值符号即可。见 match.map（x => x.replace（/ [ - \ / \\ ^ $ * +？。（）| [\] {}] / g，'\\ \\\ $&'））。

参见demo（两个正则表达式的替换模式相同，声明一次）：

See demo (the replacement pattern is the same for both regexps, declared once):

//keyword
var keyword = "Donec <b>sed</b> odio bacon dui.";
var match = ["test.", "donec", "bacon", "dui"];
var reg = new RegExp("(^|\\W)(" + match.map(x => x.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')).join('|') + ")(?!\\w|(?:[^<]*</[^>]+)?>)","ig");
var repl = "$1<b>$2</b>";
var keyword = keyword.replace(reg, repl);

console.log(keyword); 

//website
var keyword2 = "http://www.website.co.uk/hey-<b>more hello o</b>-hey-hi"; //doesnt work
var match2 = ["hello", "hey", "b"];
var reg2 = new RegExp("(^|\\W)(" + match2.map(x => x.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')).join('|') + ")(?!\\w|(?:[^<]*</[^>]+)?>)","ig");
var keyword2 = keyword2.replace(reg2, repl);

console.log(keyword2);

这篇关于RegEx在匹配的单词周围放置标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！