突出显示文本句子的所有单词匹配 JavaScript

Question

我正在尝试突出显示与我的搜索文本中的任何单词匹配的所有文本。

假设搜索文本所有文本

我的查询return所有包含上述文本中的任何单词的记录（与MSSQL中的文本搜索相同）

现在我需要突出显示与搜索中的任何单词的所有匹配项。我当前的代码只能突出显示全文。

我当前的代码：

getHighlightedText(text, higlight) {
  let parts = text.split(new RegExp(`(${higlight})`, 'gi'));
  return <span> { parts.map((part, i) => 
    <span key={i} style={part.toLowerCase() === higlight.toLowerCase() ? { color: '#93C74B' } : {} }>{part}</span>)
  } </span>;
}

提前致谢。

Answer 1

您可以使用 replace 执行此操作，这是一个示例：

const getHighlightedText = (text, higlight) => {
  let groups = higlight.split(" ").map(v => `(${v})`).join("|");
  return "<span>" + text.replace(new RegExp(groups, "gi"), g => `<span style="color:#93C74B">${g}</span>`) + "<span>";
}
let text = "Some text for testing";
let higlight = "TEXT testing";
document.write(getHighlightedText(text, higlight));

它所做的是首先从搜索到的字符串中生成一个正则表达式，正则表达式具有这种结构 (word1)|(word2)....，然后 replace 用于将所有这些单词替换为 <span> 元素具有不同的文本颜色。如果您想了解有关将 replace 与函数一起使用的更多信息，您可以这样做 HERE

Answer 2

可以简单地通过方法replace:

来完成

getHighlightedText(text, higlight) {
   let kws = higlight.replace(/ /g, "|");
   return text.replace(new RegExp(`(${kws})`, "gi"),
        '<span key="" style="color: #93C74B;"></span>');
}

Answer 3

在这个 Demo 中，我编写了一个使用动态 RegExp 对象的自定义函数，因此它可以被重复使用。它使用 replace() 并执行以下操作：

接受 2 个参数：

 1. a String that needs to be searched

 2. a variable String that will be interpolated inside of a RegExp Object.

 3. Every match will be wrapped in a `<mark>` tag.

RegExp 的语法不同于 Regex Literal，one important difference is escaping by \ is needed even for meta flags 像 \w 需要像这样转义：\w .

演示

var str = document.querySelector('main').innerHTML;

function markText(str, qry) {
  var rgx = new RegExp('\b' + qry + '\b', 'gi');
  var res = str.replace(rgx, `<mark>${qry}</mark>`);
  return res;
}

document.querySelector('main').innerHTML = markText(str, "Chuck Norris");

<main>
<p>Scientists believe the world began with the "Big Bang". Chuck Norris shrugs it off as a "bad case of gas". Chuck Norris actually can get blood from a turnip...and from whatever the hell else he wants. There is no chin behind Chuck Norris' beard. There is only another fist. Someone once videotaped Chuck Norris getting pissed off. It was called Walker: Texas Chain Saw Massacre Chuck Norris doesn't wash his clothes, he disembowels them. Chuck Norris' first job was as a paperboy. There were no survivors Chuck Norris will attain statehood in 2009. His state flower will be the Magnolia. Chuck Norris can slam a revolving door If Chuck Norris kicks a tree in a forest and no one was around, he chooses who he wants to hear it.</p>

<p>If you ask Chuck Norris what time it is, he always says, "Two seconds 'til." After you ask, "Two seconds 'til what?" he roundhouse kicks you in the face. Chuck Norris is the reason why Waldo is hiding.</p>

</main>

突出显示文本句子的所有单词匹配 JavaScript

Highlight all word matches of sentence of text JavaScript

javascript

syntax-highlighting

es6-modules

演示