如何使用 JavaScript 突出显示搜索到的字符串结果？

介绍

在我们的日常工作中，我们常常需要在一个大段文字或一篇文章中查找某个关键词或短语。如果能够突出显示这些关键词或短语，那么在查找和阅读文章中就更加方便了。在本文中，我们将介绍如何使用 JavaScript 突出显示搜索到的字符串结果。

实现方法

1. 使用正则表达式

使用正则表达式可以很方便地在一个字符串中查找所有匹配某个模式的子字符串，并将这些子字符串替换成指定的内容。

以下是查找并替换字符串的方法：

let str = "the quick brown fox jumps over the lazy dog";
let regex = /fox/;
let newStr = str.replace(regex, "<strong>fox</strong>");

在上述代码中，我们使用了 replace() 方法来替换字符串中匹配到的子字符串。其中，第一个参数是一个正则表达式，它用来匹配字符串中的内容；第二个参数是用来替换匹配到的字符串的内容，在本例中，我们将匹配到的 "fox" 子字符串替换成了 "<strong>fox</strong>"。

2. 使用文本节点

我们也可以使用文本节点来实现对字符串的突出显示。文本节点是 DOM 中的一种节点类型，它只包含一个文本字符串，并且不能包含任何子节点。

以下是使用文本节点来突出显示匹配到的字符串的示例代码：

let searchText = "fox";
let replacementText = "<strong>" + searchText + "</strong>";
let regex = new RegExp(searchText, "g");
let nodes = document.evaluate(
  "//text()[contains(., '" + searchText + "')]",
  document,
  null,
  XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
  null
);
for (let i = 0; i < nodes.snapshotLength; i++) {
  let node = nodes.snapshotItem(i);
  let newNode = node.splitText(node.nodeValue.indexOf(searchText));
  newNode.splitText(searchText.length);
  let span = document.createElement("span");
  span.innerHTML = replacementText;
  newNode.parentNode.replaceChild(span, newNode);
}

在上述代码中，我们首先定义了 searchText，它代表要查找并突出显示的字符串。然后，我们定义了 replacementText，它将用于替换查找到的字符串，以使其突出显示。

接下来，我们使用正则表达式创建了一个模式，用来匹配所有包含要查找字符串的文本节点。

然后，我们使用 document.evaluate() 方法通过 XPath 表达式获取到一个节点列表，这些节点包含了包含要查找字符串的文本节点。使用 XPathResult.ORDERED_NODE_SNAPSHOT_TYPE 参数可以返回一个有序的、固定长度的节点列表。

最后，我们对每个节点进行处理。首先使用 splitText() 方法将原始节点分成两个节点，并在第二个节点起始处插入一个 strong 标签节点，然后用这个标签节点替换原始节点的第二个部分。

代码示例

以下是一个完整的 JavaScript 示例代码，用于在文本中突出显示指定的关键词或短语：

function highlightText(text) {
  let searchText = text;
  let replacementText = "<strong>" + searchText + "</strong>";
  let regex = new RegExp(searchText, "g");
  let nodes = document.evaluate(
    "//text()[contains(., '" + searchText + "')]",
    document,
    null,
    XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
    null
  );
  for (let i = 0; i < nodes.snapshotLength; i++) {
    let node = nodes.snapshotItem(i);
    let newNode = node.splitText(node.nodeValue.indexOf(searchText));
    newNode.splitText(searchText.length);
    let span = document.createElement("span");
    span.innerHTML = replacementText;
    newNode.parentNode.replaceChild(span, newNode);
  }
}

可以将上面的 JavaScript 代码复制到您的代码中，并将 highlightText() 函数作为一个工具函数来使用。

总结

文本突出显示在查找和阅读文章中都起着重要的作用。使用正则表达式或文本节点来实现对字符串的突出显示均可达到这一目的。 JavaScript 提供了方便的实现方式，可以让我们轻松地完成这项任务。