Question

我在html div中基本上有一段文字。通过单击/激活按钮，我想突出显示一定长度的文本。因此，我需要找到它的索引并添加带有class = highlight的跨度。

因此，我想匹配innerHtml文本中的句子，例如：

var text = "The quick brown fox jumps over the lazy dog".

但是，该段落可能会将句子缩减为多行，例如：

innerHTML = 
"The quick brown 
fox jumps over 
the lazy dog"

我不能＆＃34; ulter＆＃34;无论如何都是innerHTML，例如从文本中删除空格/新行。

我似乎无法想到或找到正确的正则表达式序列来实现它。

这不起作用：

var search_regexp = new RegExp(text, 'm');
innerHTML.search(search_regexp);

Answer 1

您可以通过单一空格和replace match 换行。

var fnReplaceLR = ( str ) => str.replace(/\s+/g, " " ); //method to replace line-breaks and other consecutive multiple spaces with single space.
var text = "The quick brown fox jumps over the lazy dog";
var innerHTML = 
`The quick brown 
fox jumps over 
the lazy dog`;
var search_regexp = new RegExp( fnReplaceLR( text ) ); //no need for m modifier now
fnReplaceLR( innerHTML ).match( search_regexp ); //match the string

<强>演示

＆＃13;

var fnReplaceLR = (str) => str.replace(/\s+/g, " "); //method to replace line-breaks and other consecutive multiple spaces with single space.
var text = "The quick brown fox jumps over the lazy dog";
var innerHTML =
  `The quick brown 
    fox jumps over 
    the lazy dog`;
var search_regexp = new RegExp(fnReplaceLR(text)); //no need for m modifier now
var output = fnReplaceLR(innerHTML).match(search_regexp); //match the string
console.log(output);

＆＃13;

Answer 2

嗯，这就是我将要做到的。

只需将文字拆分为\n，然后加入" "，即可获得单行格式。现在，您可以使用.includes检查您要匹配的文字是否是其他文字的一部分

＆＃13;

var text = "The quick brown fox jumps over the lazy dog",
    stringWithBreakLines = `The quick brown
fox jumps over
the lazy dog
this is some additional
text in html`;
 
console.log(stringWithBreakLines.split("\n").join(" ").includes(text))

＆＃13;

Answer 3

当你在搜索单词（不仅仅是空格）之间的任何空格分割时，你需要用一般的空白标记替换搜索模式中的空格。这将有效：

var regex = text.split(/\s+/).join('\\s+');
var search_regexp = new RegExp(text, 'm');
innerHTML.search(search_regexp);

split(/\s+/).join('\\s+')的效果是：

在任意数量的空格上拆分输入文本，生成一个单词数组
使用\s+正则表达式标记加入单词，该标记与一个或多个空格字符匹配。这包括换行符和标签。

正则表达式匹配包含新行

3 个答案: