备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

javascript做的高亮效果

2017-11-14 885
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

方法一：

 

     
 
  1. <script>  
    2.  
 
  2. functionHighLight(nWord){   
    3.  
 
  3.  
    4.  
 
  4.  if(nWord!=''){    
    5.  
 
  5.  
    6.  
 
  6. varkeyword=document.body.createTextRange();   
    7.  
 
  7.  
    8.  
 
  8.  while(keyword.findText(nWord)){    
    9.  
 
  9.  
    10.  
 
  10.  keyword.pasteHTML("<spanstyle='color:red;'>"+keyword.text+"</span>");    
    11.  
 
  11.  
    12.  
 
  12.  keyword.moveStart('character',1);    
    13.  
 
  13.  
    14.  
 
  14. }  
    15.  
 
  15.  
    16.  
 
  16. }  
    17.  
 
  17.  
    18.  
 
  18. }  
    19.  
 
  19.  
    20.  
 
  20. functionhighword(nWord){   
    21.  
 
  21.  
    22.  
 
  22.  vararray=nWord.split(",");    
    23.  
 
  23.  
    24.  
 
  24.  for(vari=0;i<array.length;i++){    
    25.  
 
  25.  
    26.  
 
  26. HighLight(array[i]);  
    27.  
 
  27.  
    28.  
 
  28. }  
    29.  
 
  29.  
    30.  
 
  30. }  
    31.  
 
  31. </script>  
    32.  
 
  32.  
    33.  
 
  33.  
    34.  
 
  34.  <bodyonload="highword('li,jin')">    
    35.  
 
  35.  
    36.  
 
  36. <p>liujinzhongliujinzhongliuzhong</p>  
    37.  
 
  37.  
    38.  
 
  38. </body> 
    39.  

 

方法二：
 

 

     
 
  1. <html> 
    2.  
 
  2.  <head>  
    3.  
 
  3.  <title>TestPage</title>  
    4.  
 
  4.  <scripttypescripttype="text/javascript">    
    5.  
 
  5. <!--  
    6.  
 
  6. functionhighLight(ele,keys)   
    7.  
 
  7. {  
    8.  
 
  8.  varreg=newRegExp("("+keys.replace(/,/,"|")+")","g");    
    9.  
 
  9.  
    10.  
 
  10.  eleele.innerHTML=ele.innerHTML.replace(reg,"<fontcolorfontcolor=\"red\">$1</font>");    
    11.  
 
  11. }  
    12.  
 
  12.  
    13.  
 
  13.  window.onload=function()    
    14.  
 
  14. {  
    15.  
 
  15. highLight(document.getElementsByTagName("p")[0],"li,jin");   
    16.  
 
  16. }  
    17.  
 
  17.  //-->    
    18.  
 
  18.  </script>  
    19.  
 
  19.  </head>  
    20.  
 
  20.  
    21.  
 
  21.  <body>  
    22.  
 
  22.  <p>liujinzhongliujinzhongliuzhong</p>  
    23.  
 
  23.  </body>  
    24.  
 
  24.  </html>  
    25.  

 

 本文转自sucre03 51CTO博客，原文链接：http://blog.51cto.com/sucre/380684，如需转载请自行联系原作者

                        
                    

                    
                        

                            

    
文章标签：

    

        

            JavaScript
        

        

            前端开发
        

    



                            

    
关键词：

    

        

            JavaScript高亮
        

    



                            
                        

                        
                        
                    
                

                


                

                    

                        

                            
                                
                            
                            

                        

                        科技小先锋
                        

                        

                    

                    

                        

                            

                            
目录

                        

                        

                    

                

                

                    

                


                

    
相关文章

    

        

            

                

                    LibertyNLP
                    
                

                |
                
5月前

                |
                

                    JSON
                    JavaScript
                    前端开发
                

            

            

                

                    
                        【2023-11-01】一款基于 pdf.js 的 PDF 批注注释插件库（纯JS、高亮、画笔、多边形、历史记录）
                    
                    
基于纯 JavaScript 和 PDF.js 做的一款 PDF 批注拓展插件-PDFMaster，一款仍能兼容支持IE 11的PDF批注插件，界面美观功能强大，有无开发经验都可以快速简单快速使用。

                    

                        

                            

                                LibertyNLP
                                
                            

                            143
                            0
                            
                        

                    

                

                
                    【2023-11-01】一款基于 pdf.js 的 PDF 批注注释插件库（纯JS、高亮、画笔、多边形、历史记录）
                
            

        

        

            

                

                    入冉心
                    
                

                |
                
6月前

                |
                

                    JavaScript
                    容器
                

            

            

                

                    
                        js如何实现选项卡高亮+内容切换
                    
                    
js如何实现选项卡高亮+内容切换

                    

                        

                            

                                入冉心
                                
                            

                            62
                            0
                            
                        

                    

                

                
            

        

        

            

                

                    兜里只有三分钱~
                    
                

                |
                
7月前

                |
                

                    JavaScript
                

            

            

                

                    
                        js字体标红-高亮-自定义高亮-搜索高亮
                    
                    
js字体标红-高亮-自定义高亮-搜索高亮

                    

                        

                            

                                兜里只有三分钱~
                                
                            

                            40
                            0
                            
                        

                    

                

                
            

        

        

            

                

                    漏刻有时
                    
                

                |
                
9月前

                |
                

                    JavaScript
                    前端开发
                    程序员
                

            

            

                

                    
                        javascript插件库的应用：mapper.js实现图片热点的hover高亮效果
                    
                    
javascript插件库的应用：mapper.js实现图片热点的hover高亮效果

                    

                        

                            

                                漏刻有时
                                
                            

                            139
                            0
                            
                        

                    

                

                
            

        

        

            

                

                    半虹
                    
                

                
                
                |
                

                    JavaScript
                    前端开发
                

            

            

                

                    
                        JavaScript实战笔记(四) 选中文本高亮
                    
                    
JavaScript实战笔记(四) 选中文本高亮

                    

                        

                            

                                半虹
                                
                            

                            197
                            0
                            
                        

                    

                

                
            

        

        

            

                

                    明金同学
                    
                

                
                
                |
                

                    JavaScript
                    前端开发
                

            

            

                

                    
                        使用 JavaScript 中的 document 对象查找 HTML 元素，实现“登录”按钮的高亮特效 鼠标悬浮于“登录”按钮时，按钮高亮显示；
                    
                    
使用 JavaScript 中的 document 对象查找 HTML 元素，实现“登录”按钮的高亮特效 鼠标悬浮于“登录”按钮时，按钮高亮显示；

                    

                        

                            

                                明金同学
                                
                            

                            273
                            0
                            
                        

                    

                

                
                    使用 JavaScript 中的 document 对象查找 HTML 元素，实现“登录”按钮的高亮特效 鼠标悬浮于“登录”按钮时，按钮高亮显示；
                
            

        

        

            

                

                    y0umer
                    
                

                
                
                |
                

                    前端开发
                    JavaScript
                    搜索推荐
                

            

            

                

                    
                        js+正文规则  高亮搜索关键字
                    
                    

采用的：
 function HighlightText(obj,keyword)  
 { 
 if(document.referrer){
   var reg=new RegExp(keyword,"g"); //创建正则RegExp对象
   var regdx=keyword;
   var data=document.

                    

                        

                            

                                y0umer
                                
                            

                            925
                            0
                            
                        

                    

                

                
            

        

        

            

                

                    y0umer
                    
                

                
                
                |
                

                    JavaScript
                    前端开发
                

            

            

                

                    
                        js+正文规则  高亮搜索关键字（三）
                    
                    

JavaScript的replace方法与正则表达式结合应用讲解
【 来源：网络        作者：佚名 更新时间：2007-04-11 | 字体：大
 中
 小
】
作者： hezhiwu5#163.

                    

                        

                            

                                y0umer
                                
                            

                            827
                            0
                            
                        

                    

                

                
            

        

        

            

                

                    y0umer
                    
                

                
                
                |
                

                    搜索推荐
                    JavaScript
                    前端开发
                

            

            

                

                    
                        js+正文规则  高亮搜索关键字（二）
                    
                    

【原创】JavaScript高亮搜索关键字（改进版）
[2009-1-6 16:25:00]  by mwfls



11
我顶 


.maks { line-height: 150%; padding: 10px; }.

                    

                        

                            

                                y0umer
                                
                            

                            1090
                            0
                            
                        

                    

                

                
            

        

        

            

                

                    童小纯
                    
                

                |
                
2月前

                |
                

                    JavaScript
                

            

            

                

                    
                        Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解（学习总结---从入门到深化）
                    
                    
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解（学习总结---从入门到深化）


                    

                        

                            

                                童小纯
                                
                            

                            27
                            0
                            
                        

                    

                

                
            

        

    



            

            

                
                
                    
                    

    

        

            
热门文章

        

        

            
最新文章

        

    

    

        

            

                
  • 
                    
                        
    
                            
    1
    
                            
                            
    JavaScript基础语法（codewhy版本）（一）
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
    2
    
                            
                            
    JavaScript 权威指南第七版（GPT 重译）（三）(1)
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
    3
    
                            
                            
    JavaScript高级笔记-coderwhy版本（六）
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    4
    
                            
    JavaScript 权威指南第七版（GPT 重译）（六）(4)
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    5
    
                            
    JavaScript 权威指南第七版（GPT 重译）（四）(4)
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    6
    
                            
    JavaScript 权威指南第七版（GPT 重译）（二）(1)
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    7
    
                            
    JavaScript 权威指南第七版（GPT 重译）（六）(3)
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    8
    
                            
    JavaScript 权威指南第七版（GPT 重译）（三）(2)
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    9
    
                            
    报错/ ./node_modules/axios/lib/platform/index.js Module parse failed: Unexpected token (5:2)怎么解决？
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    10
    
                            
    在Blazor中使用Chart.js快速创建图表
    
                            
    
                        
    
                        
                
    • 
            
    
            
    
                
            
    
        
    
        
    
            
    
                
  • 
                    
                        
    
                            
    1
    
                            
                            
    js开发：请解释事件冒泡和事件捕获。
    
                            
    18
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
    2
    
                            
                            
    js开发：请解释this关键字在JavaScript中的用法。
    
                            
    7
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
    3
    
                            
                            
    js开发：请解释同步和异步编程的区别。
    
                            
    12
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    4
    
                            
    学习JavaScript
    
                            
    10
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    5
    
                            
    JS 几种循环遍历
    
                            
    8
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    6
    
                            
    深入解析JavaScript原生操作DOM技术
    
                            
    13
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    7
    
                            
    深入剖析JavaScript的事件循环
    
                            
    11
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    8
    
                            
    JavaScript中的性能优化：代码优化技巧与性能分析工具
    
                            
    14
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    9
    
                            
    JavaScript中的错误处理：try-catch语句与错误对象
    
                            
    7
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    10
    
                            
    浏览器插件crx文件--JS混淆与解密
    
                            
    9
    
                        
    
                        
                
    • 
            
    
            
    
                
            
    
        
    
    
    

    
                    
                    
    
    
    
        
    相关课程
    
        更多
    
    
    
    
        
  • 
                JavaScript入门与实战
            
    • 
        
  • 
                JavaScript 自学手册文档教程
            
    • 
    
    

    
                    
    
    
    
        
    相关电子书
    
        更多
    
    
    
    
        
  • 
                JavaScript异步编程
            
    • 
        
  • 
                Delivering Javascript to World
            
    • 
        
  • 
                编程语言如何演化-以JS的private为例
            
    • 
    
    

    
                    
    
    
    
        
    相关实验场景
    
        更多
    
    
    
    
        
  • 
            前端开发基础3：CSS3常见显示属性
        
    • 
        
  • 
            Html5和Webpack2：Webpack5打包JS和样式表
        
    • 
    
    

    
                    
                    
                    
    
                        
    
    
    
        
    下一篇
    
    
    
    部署LAMP环境（Alibaba Cloud Linux 3）