如何使用 JavaScript 创建一次性文本突出显示效果？

使用 JavaScript 突出显示文本：一次性聚光灯

当涉及到突出显示网页中的文本时，我们经常求助于默认值浏览器功能。但是，如果您需要精确的一次性突出效果怎么办？以下是如何使用 JavaScript 实现它。

jQuery 高亮效果为文本高亮提供了一种简单的解决方案。但如果您正在寻求原始 JavaScript 方法，请考虑以下代码片段：

function highlight(text) {
  const inputText = document.getElementById("inputText");
  const innerHTML = inputText.innerHTML;
  const index = innerHTML.indexOf(text);

  if (index >= 0) {
    innerHTML =
      innerHTML.substring(0, index) +
      `<span class="highlight">` +
      innerHTML.substring(index, index + text.length) +
      `</span>` +
      innerHTML.substring(index + text.length);
    inputText.innerHTML = innerHTML;
  }
}

为了将我们的突出显示效果与我们想要突出显示的文本相匹配，我们应用了一些 CSS 规则：

.highlight {
  background-color: yellow;
}

现在，让我们把它们放在一起。我们创建一个 ID 为“inputText”的 HTML 元素，我们希望在其中进行突出显示。我们还添加了一个带有触发“突出显示”功能的 onclick 事件的按钮。

<button onclick="highlight('fox')">Highlight</button>

<div>
<p>通过单击“突出显示”按钮，JavaScript 代码会定位文本中第一次出现的“fox”并将其括起来它在一个内具有“highlight”类的元素。此 span 元素应用黄色背景颜色，使“fox”文本脱颖而出。</p>
<p>此代码示例提供了一种简单而有效的方法来突出显示网页中的文本。您可以自定义搜索文本、突出显示颜色，甚至可以扩展功能以突出显示多个匹配项（如果需要）。</p>
</div>

以上是如何使用 JavaScript 创建一次性文本突出显示效果？的详细内容。更多信息请关注PHP中文网其他相关文章！