专栏首页web开发JavaScript实现段落文本高亮

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 条评论
登录 后参与评论

相关文章

  • canvas实现验证码功能

    我们在做一些后台系统登录功能的时候,一般都会用到验证码,最多的就是后台生成的验证码图片返回给前端的。也可以不调用后端接口,前端使用canvas直接生成验证码。

    用户1174387
  • 移动端下拉刷新上拉加载-mescroll.js插件

    最近无意间看到有这么一个上拉刷新下拉加载的插件 —— mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后...

    用户1174387
  • NodeJS使用formidable实现文件上传

      最近自学了一下NodeJS,然后做了一个小demo,实现歌曲的添加、修改、播放和删除的功能,其中自然要实现音乐和图片的上传功能。于是上网查找资料,找到了一个...

    用户1174387
  • 深入 Spring Boot : 快速集成 Dubbo + Hystrix

    Hystrix 旨在通过控制那些访问远程系统、服务和第三方库的节点,从而对延迟和故障提供更强大的容错能力。Hystrix具备拥有回退机制和断路器功能的线程和信号...

    用户1257393
  • java之servlet入门操作教程一

    2.设置项目名称:这里是myFirstServlet,然后选择Java EE version :这里选择的是Java EE 7,点击finish

    Vincent-yuan
  • 2015年编程之美(资格赛) ---2月29日

    时间限制:2000ms 单点时限:1000ms 内存限制:256MB 描述 给定两个日期,计算这两个日期之间有多少个2月29日(包括起始日期)。 只有闰年有2月...

    Gxjun
  • MyBatis 二级缓存

    映射语句中的select语句将会被缓存, 映射语句中的insert update delete 语句将会刷新缓存

    mySoul
  • 学习PHP弱引用的知识

    之前的文章中,我们已经学习过引用和引用传值相关的知识。我们知道,PHP 中没有纯引用(指针),不管是对象,还是用引用符号 & 赋值的变量,都是对一个符号表的引用...

    硬核项目经理
  • java入门踩的坑2 【数据库快速入门】2019年8月11日

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    韩旭051
  • 模仿京东购物车实现加减操作

    在线展示:https://gethtml.cn/project/2020/04/15/index.html

    Dreamy.TZK

扫码关注云+社区

领取腾讯云代金券