需要购买阿里云产品和服务的，点击此链接领取优惠券红包，优惠购买哦，领取后一个月内有效： https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=fp9ccf07

代码：

<!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>

效果：

JavaScript实现段落文本高亮的更多相关文章

  1. C# 获取Word文本高亮和背景（附vb.net代码）

    Word中的文本高亮和背景是通过不同方法来设置的.文本高亮(Text Highlight Color)是通过[字体]中的快速工具栏设置:文本背景(Text Background/Shading)是通过 ...

  2. 简单使用JSON，JavaScript读取JSON文本(三)

    JavaScript 读取 JSON 文本转换为对象 JSON 最常见的用法之一,是从 web 服务器上读取 JSON 数据(作为文件或作为 HttpRequest),将 JSON 数据转换为 Jav ...

  3. javaScript识别网址文本并转为链接文本

    最近项目有个需求:用户之间发送消息时,如果发送者输入的信息中含有网址文本,要在接受者界面中显示网址链接,点击该链接直接跳转到网页.这个功能和 QQ 发送网址文本的效果非常像,可以说是一模一样的. 思路 ...

  4. 10款jQuery文本高亮插件

    [编者按]本文作者为 Julian Motz,主要介绍十款 jQuery 文本高亮插件的现状.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 很多应用或网站都为用户提供搜索关键词的方法.为了 ...

  5. 用javascript复制富文本

    由于项目需求,希望能够用javascript复制富文本格式的数据,例如全选一个网页Ctrl+C, Ctrl+V到一个word文档中,数据还是原来的格式,显示出来的样子也都和原来一样.现在希望使用jav ...

  6. The usage of Markdown---文字强调：加粗/斜体/文本高亮/删除线/下划线/按键效果

    更新时间:2019.09.14 1. 序言 有时候,我们需要对某些文字进行强调,例如粗体和斜体.而Markdown通常可以使用星号*或者下划线_进行文字强调. 2. 加粗 如果想要达到加粗的效果,可以 ...

  7. vs2015 不支持javascript的智能提示高亮

    有些人安装了vs2015后发现居然不支持javascrpt的高亮功能,连工具-选项-文本编辑器里面的javascript也没有了,楼主也碰到这么个情况了,估计是有与装了多个版本的原因,楼主电脑安装了V ...

  8. JavaScript Iframe富文本编辑器中的光标定位

    最近在项目中碰到一个比较棘手的问题: 在iframe富文本编辑器中,有个工具栏,这个工具栏在iframe标签之外,工具栏上有一个按钮,点击该按钮向iframe正在编辑中的光标处插入一个图片,图片会插入 ...

  9. Javascript之模拟文字高亮

    在我们平时浏览网页的时候,我们常常会用到Ctrl+F(搜索)功能,被搜索到的文字就是高亮显示.那么,如何在Javascript中模拟文字高亮显示这一功能呢? 以下为笔者写的样例代码: <!DOC ...

随机推荐

  1. MacOS 下安装mysqlclient 的问题及解决办法

    [操作环境] 操作系统:MacOS X 10.13.1 mysql运行环境:Docker Docker版本:17.09-ce 在开发Django时,刚开始使用的sqlite进行开发,想部署到生产环境需 ...

  2. Iptables详解七层过滤

    <Iptables详解七层过滤> 一.防火墙简介 防火墙其实就是一个加固主机或网络安全的一个设备或者软件而已,通过防火墙可以隔离风险区域与安全区域的连接,同时不会妨碍风险区域的访问.当然需 ...

  3. lua API 小记2

    1. 创建lua虚拟机 lua_State *lua_newstate (lua_Alloc f, void *ud) 创建一个新的独立的lua虚拟机. 参数指定了内存分配策略及其参数, 注意, 让用 ...

  4. 变位词(0029)-swustoj

    变位词(0029)水题 变位词如果两个单词的组成字母完全相同,只是字母的排列顺序不一样,则它们就是变位词,两个单词相同也被认为是变位词.如tea 与eat , nic 与cin, ddc与dcd, a ...

  5. Nova计算节点安装配置

    Nova计算节点安装配置 openstack pike 安装 目录汇总 http://www.cnblogs.com/elvi/p/7613861.html ## Nova计算节点安装配置 #基本配置 ...

  6. POJ A Simple Problem with Integers 线段树 lazy-target 区间跟新

    A Simple Problem with Integers Time Limit: 5000MS   Memory Limit: 131072K Total Submissions: 105742 ...

  7. NYOJ 417 死神来了 鸽巢原理

    死神来了 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述 有一天,王小子在遨游世界时,遇到了一场自然灾害.一个人孤独的在一个岛上,没有吃的没有喝的.在他饥寒交迫将要死亡时 ...

  8. gis电子地图开发公司面临的挑战和机遇

    从上个世纪90年代开始电子地图应用就已经收到人们的关注,但是由于时代的局限性和市场经济发展的不成熟.地理信息系统系统的应用并没有得到很好的利用.只有少数的国家机构和军事系统才能够使用这些应用.随着技术 ...

  9. CentOS7操作系统参数优化

    生产环境配置需要标准化,将常用操作写成脚本用于操作系统的初始化. #!/bin/bash #Date:2017 #This Script is for centos7.3 init #01.配置yum ...

  10. 倒水问题 (FillUVa 10603) 隐式图

    题意:本题的题意是给你三个杯子,第一二个杯子是空的,第三个杯子装满水,要求是量出一定容量d升的水.若是得不到d升的水,那就让某一个杯子里面的水达到d',使得d'尽量接近d升. 解题思路:本题是给出初始 ...