JavaScript实现段落文本高亮

代码:

<!doctype html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
   <title>文本高亮</title>
    <style>
        .bg-red {
            background-color: red;
        }
    </style>
</head>
<body>
    <div style="margin: 20px auto;text-align: center;">
        <input type="text" id="search" placeholder="输入要搜索的内容">
    </div>
    <div style="width: 90%;margin: 20px auto;" id="con">
        <p>在Web开发中经常会碰到需要动态监听输入框值变化的情况,如果使用 onkeydown、onkeypress、onkeyup 这个几个键盘事件来监测的话,监听不了右键的复制、剪贴和粘贴这些操作,处理组合快捷键也很麻烦。</p>
        <p>js的replace默认替换只替换第一个匹配的字符,如果字符串有超过两个以上的对应字符就无法进行替换,这时候就要进行一点操作,进行全部替换。 var strM = "这是要被替换的字符串啊啊!...</p>
        <p>最近在帮公司一个小孩看一个很奇怪的bug,是MFC 的一个小GUI,在客户环境上一个输入框中的数据总是有乱码,导致从数据库中查不出数据。但是奇怪的是在我们环境上重现不了,因为我们的测试环境用的是Win...</p>
    </div>
</body>

<script>
    window.onload = function () {
        var pNodes = document.getElementById('con').getElementsByTagName('p');
        var searchNode = document.getElementById('search');

        var pTextArr = [];
        for(var i=0; i<pNodes.length; i++){
            pTextArr.push(pNodes[i].innerHTML);
        }

        //监听文本框的内容的变化
        searchNode.addEventListener('input', function (e) {
            var text = this.value;  //要匹配的文字
            for(var i=0; i<pNodes.length; i++){
                var pNode = pNodes[i];  //段落节点
                var pText = pTextArr[i];    //每一段的文字
                var values = pText.split(text);
                var pNodeText = values.join('<span class="bg-red">'+text+'</span>');
                pNode.innerHTML = pNodeText;
            }
        })
    }
</script>
</html>

效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏偏前端工程师的驿站

CMD魔法堂:支持显示UTF8编码的中文

一、前言                                     在Unbuntu中用sqlite3-command-line操作sqlite3...

233100
来自专栏10km的专栏

java:关于properties配置文件中的换行(多行)的坑

properties中都是以name=value这样的k-v字符串对形式保存的。 在写properties文件时,如果value非常长,看起来是非常不方便的...

21980
来自专栏Golang语言社区

Go语言的队列和堆栈实现方法

本文实例讲述了Go语言的队列和堆栈实现方法。分享给大家供大家参考。具体如下: golang,其实我的实现是利用container/list包实现的,其实cont...

31080
来自专栏SpringBoot

Jquery 常见案例

版权声明:本文为博主原创文章,未经博主允许不得转载。

24610
来自专栏V站

六个有用的 PHP 片段或技巧

网上有很多 PHP 代码片段可以提高开发效率,也可以学习一下其中的技巧而应用在自己的项目中,下面就精选了几个比较有用的 PHP 片段。

23120
来自专栏软件开发

JavaScript学习总结(五)——jQuery插件开发与发布

jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非...

13130
来自专栏阮一峰的网络日志

Bookmarklet编写指南

前一段日子,我写了两个Bookmarklet----"短网址生成"和"短网址还原"。 它们用起来很方便,除了我本人之外,其他朋友也在用。第一次发布Bookmar...

50290
来自专栏Golang语言社区

Golang语言-并发支持

Golang 运行时(runtime)管理了一种轻量级线程,被叫做 goroutine。创建数十万级的 goroutine 是没有问题的。范例: packag...

380140
来自专栏mySoul

作为window对象属性的元素 多窗口和窗体

如果html文档中用id属性为元素命名。并且如果 window对象没有此名字的属性,则window对象会赋予一个属性,其名字为id属性的值,其值指向该元素

17750
来自专栏程序员互动联盟

【答疑释惑】Linux下面tcsh和bash的区别

在我们的公众号里面遇到有人问tcsh和bash的区别: ? 正如小编回复的那样,这个问题其实不用太去纠结,拿到一个常用的去学习就行了。不过这里还是大致说下这两个...

33550

扫码关注云+社区

领取腾讯云代金券