在我们平时浏览网页的时候，我们常常会用到Ctrl+F（搜索）功能，被搜索到的文字就是高亮显示。那么，如何在Javascript中模拟文字高亮显示这一功能呢？

以下为笔者写的样例代码：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>Highlight</title>

     <!--style of mark:Green,bold.-->

     <style>

         mark {

             background-color:#00ff90; font-weight:bold;

         }

         p{text-indent:2em;}

     </style>

     <script>

     //highlight 'query' in page

     function Func(){

         var query = document.getElementById('query').value;

         if(query == ''){alert('Query word is empty!')}

         else{

             var arr = [1, 2, 3, 4];

             var i;

             for(i=0; i<arr.length; i++){

                 var x = String(arr[i]);

                 document.getElementById(x).innerHTML = document.getElementById(x).innerHTML.replace(new RegExp(query,'g'),'<mark>'+query+'</mark>');

             }

         }

     }

     //refresh the page to cancel highlighting

     function func(){

         window.location.reload();

     }

     </script>

 </head>

 <body>

     <!--example text-->

     <p id=''>北京，简称“京”，是中华人民共和国的首都、直辖市、国家中心城市、超大城市、国际大都市，全国政治中心、文化中心、国际交往中心、科技创新中心是中央委员会、中华人民共和国中央人民政府、全国人民代表大会、中国人民政治协商会议全国委员会、中华人民共和国中央军事委员会所在地，也是中部战区司令部驻地</p>

     <p id=''>上海，简称“沪”或“申”，中华人民共和国直辖市，国家中心城市，超大城市，国际经济、金融、贸易、航运、科技创新中心，首批沿海开放城市。上海地处长江入海口，是长江经济带的龙头城市，隔东中国海与日本九州岛相望，南濒杭州湾，北、西与江苏、浙江两省相接。</p>

     <p id=''>广州，简称穗，别称羊城、花城，广东省省会，位于广东省中南部，东江、西江、北江交汇处，珠江三角洲北缘，濒临中国南海。</p>

     <p id=''>深圳，简称“深”，别称鹏城，中国四大一线城市之一，广东省省辖市、计划单列市、副省级市、国家区域中心城市、超大城市。地处广东南部，珠江三角洲东岸，与香港一水之隔，东临大亚湾和大鹏湾，西濒珠江口和伶仃洋，南隔深圳河与香港相连，北部与东莞、惠州接壤。</p>

     <!--input and button-->

     Query word: <input type="text" name="highlight" id='query'><br><br>

     <button type="button" onclick="Func()">Highlight</button>

     <button type="button" onclick="func()">Cancel Highlighting</button>

 </body>

 </html>

在“Query word“”中输入“中国”，显示如下：

如果要取消高亮，则点击“Cancel Highlighting”按钮，就是刷新页面，也就取消高亮。如果"Query word"中没有输入，则会弹出窗口，显示“Query word is empty!”.

这样，我们就能轻松模拟平时浏览网页时发生的文字高亮的情形啦~~

本次分享到此结束，欢迎大家交流~~

Javascript之模拟文字高亮的更多相关文章

  1. Javascript 接口模拟

    Javascript接口模拟可以通过三种方式实现文档手段(注释).辅助类和鸭式辨. 第一种和第二种只形式上体现没有真正的实现. 鸭式辨实现原理是:"只要能像鸭子一样叫和走就是鸭子" ...

  2. JavaScript之模拟评星打分

    <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312&qu ...

  3. HTML5 JavaScript实现图片文字识别与提取

    8月底的时候,@阿里巴巴 推出了一款名为“拯救斯诺克”的闯关游戏,作为前端校园招聘的热身,做的相当不错,让我非常喜欢.后来又传出了一条消息,阿里推出了A-star(阿里星)计划,入职阿里的技术培训生, ...

  4. JavaScript自适应调整文字大小

    JavaScript自适应调整文字大小 今天有个任务,发现页面上的数字由于太长而与其他数字重叠了.这个数字还不能像文字那样只显示一部分,必须全部显示.想了一些办法都不行,最后把超过1000变成1K,大 ...

  5. Javascript中对文字编码的三个函数

    JavaScript中对文字编码主要有3个函数 escape,encodeURI, encodeURIComponent 相应3个解码函数 unescape, decodeURI, decodeURI ...

  6. javaScript实现选中文字提示新浪微博分享的效果

    <!DOCTYPE html> <html xmlns:wb="http://open.weibo.com/wb"> <head> <me ...

  7. JavaScript动画-模拟拖拽

    模拟拖拽的原理: x1等于div.offsetLeft y1等于div.offsetTop x2等于ev.clientX(ev表示event事件) y2等于ev.clientY 当我们在方块上按下鼠标 ...

  8. [Javascript] 爬虫 模拟新浪微博登陆

     概述: 由于业务需要,要编写爬虫代码去爬去新浪微博用户的信息. 虽然在网上能找到不少信息,但由于新浪微博改版,其登陆机制进行了修改,故很多老的文章就不适合用了. 经过一番摸索,成功模拟新浪微博的登陆 ...

  9. 浅谈Javascript事件模拟

    事件是用来描述网页中某一特定有趣时刻的,众所周知事件通常是在由用户和浏览器进行交互时触发,其实不然,通过Javascript可以在任何时间触发特定的事件,并且这些事件与浏览器创建的事件是相同的.这就意 ...

随机推荐

  1. StackExchange.Redis学习笔记(三) 数据库及密码配置 GetServer函数

    这一章主要写一些StackExchange.Redis的配置及不太经常用到的函数 数据库连接 下面是我的连接字符串,里面指定了地址,密码,及默认的数据库 Redis启动后默认会分成0-15个数据库,不 ...

  2. vpn服务器搭建

    这里我们用CentOS6.0和Shdowsocks搭建 首先了解几个命令 wget 是一个从网络上自动下载文件的自由工具,支持通过 HTTP.HTTPS.FTP 三个最常见的 TCP/IP协议 下载, ...

  3. android sdk manager 国内镜像

    //东软信息学院 mirrors.neusoft.edu.cn 80   //北京化工大学 ubuntu.buct.edu.cn/ubuntu.buct.cn 80   //中国科学院开源协会 mir ...

  4. 关于apidoc文档生成不了的一个原因

    前几天在写完API后,写注释文档,然后很习惯的去用apidoc取生成注释文档,但是奇怪的事发生了,没有注释的内容,也没有报错:注释代码如下: /* * @api {get} /applet/:id 根 ...

  5. js的学习（window对象的使用）

    open方法: //语法:var winObj = window.open([url][,name][,options]);  //参数:url:准备在新窗口中显示那个文件.url可以为空字符串,表示 ...

  6. 备忘录模式（Memento）

    备忘录模式(Memento) 主要目的是保存一个对象的某个状态,以便在适当的时候恢复对象,个人觉得叫备份模式更形象些,通俗的讲下:假设有原始类A,A中有各种属性,A可以决定需要备份的属性,备忘录类B是 ...

  7. 驱动调试-根据oops定位错误代码行

    1.当驱动有误时,比如,访问的内存地址是非法的,便会打印一大串的oops出来 1.1以LED驱动为例 将open()函数里的ioremap()屏蔽掉,直接使用物理地址的GPIOF,如下图所示: 1.2 ...

  8. 自己动手实现mybatis动态sql

    发现要坚持写博客真的是一件很困难的事情,各种原因都会导致顾不上博客.本来打算写自己动手实现orm,看看时间,还是先实现一个动态sql,下次有时间再补上orm完整的实现吧. 用过mybatis的人,估计 ...

  9. ACM HDU 1559 最大子矩阵

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1559 这道题 挺好的,当时想出解法的时候已经比较迟了.还是平时看得少. 把行与列都进行压缩.ans[i ...

  10. 微信JS-SDK选择相册或拍照并上传PHP实现

    理解:微信上传接口是拍照,或者选择本地照片,上传到微信的服务器,获取到一个id,通过token与这个id获取到图片,保存到服务器即可. 效果 通过微信js接口,调用底层程序. 需要引入js文件,并进行 ...