首页 > web前端 > js教程 > 如何使用 JavaScript 创建一次性文本突出显示效果?

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

Barbara Streisand
发布: 2024-12-04 17:15:12
原创
598 人浏览过

How Can I Create a One-Time Text Highlighting Effect with JavaScript?

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

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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 规则:

1

2

3

.highlight {

  background-color: yellow;

}

登录后复制

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

1

2

3

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

 

<div>

登录后复制

通过单击“突出显示”按钮,JavaScript 代码会定位文本中第一次出现的“fox”并将其括起来它在一个内具有“highlight”类的元素。此 span 元素应用黄色背景颜色,使“fox”文本脱颖而出。

此代码示例提供了一种简单而有效的方法来突出显示网页中的文本。您可以自定义搜索文本、突出显示颜色,甚至可以扩展功能以突出显示多个匹配项(如果需要)。

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

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板