Question

我正在使用正则表达式突出显示包含特定短语的行。

我当前的突出显示功能将读取整个文本，并将短语的每个实例放在突出显示范围内。

    const START = "<span name='highlight' style='background-color: yellow;'>";
    const END   = "</span>"

    function highlight(text, toReplace) {

        let reg = new RegExp(toReplace, 'ig');

        return text.replace(reg, START + toReplace + END);
    }

我想扩展我的正则表达式，以便每个短语从前一个<br>到后一个<br>突出显示。

highlight("This<br>is some text to<br>highlight.", "text");

当前输出：

This<br>is some<span name="highlight" style="background-color:yellow;">text</span> to<br>highlight."

想要的输出：

This<br><span name="highlight" style="background-color:yellow;">is some text to</span><br>highlight.

Answer 1

您可能希望匹配<之前和之后的>和text以外的所有字符，建议对传递给RegExp的文字文本进行转义构造函数。另外，要替换为整个匹配项，只需使用$&占位符：

const START = "<span name='highlight' style='background-color: yellow;'>";
const END   = "</span>"

function highlight(text, toReplace) {
   let reg = new RegExp("(<br/?>)|[^<>]*" + toReplace.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') + "[^<>]*", 'ig');
   return text.replace(reg, function ($0,$1) { return $1 ? $1 : START + $0 + END; });
}
console.log(highlight("This<br>is some text to<br>highlight.", "text"));

console.log(highlight("This<br>is a bunch of<br>text", "b"));

正则表达式看起来像/[^<>]*text[^<>]*/gi，它将匹配0个或多个除<和>以外的字符，然后以不区分大小写的方式匹配text，然后再匹配0或更多<和>以外的字符，并且替换中的$&会将匹配的值放入突出显示标签中。

Answer 2

我的猜测是，这个简单的表达方式，

(<br>)(.*?)(\1)

可以在这里工作。

const regex = /(<br>)(.*?)(\1)/gs;
const str = `This<br>is some text to<br>highlight. This<br>is some text to<br>highlight.  This<br>is some text to<br>highlight.  


This<br>is some 

text to<br>highlight. This<br>is some text to<br>highlight.  This<br>is some text to<br>highlight.`;
const subst = `$1<span name='highlight' style='background-color: yellow;'>$2</span>$3`;

// The substituted value will be contained in the result variable
const result = str.replace(regex, subst);

console.log(result);

如果您感兴趣，请在此demo中对表达式进行说明。

使用正则表达式突出显示包含短语的行

2 个答案: