javascript做的高亮效果

简介:

方法一:

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

方法二:

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

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

相关文章
|
存储 JSON JavaScript
【2023-08-20】最新PDF.js PDF批注注释插件库:创建、保存和管理PDF注释批注(高亮、文本框、绘图、截屏、历史记录、橡皮檫)-pdf.js
探索基于pdf.js-dist开发的纯Javascript PDF批注插件库,支持保存、导出、导入和管理PDF文件中的批注。多个功能模块为您提供丰富的PDF注释体验。
926 0
【2023-08-20】最新PDF.js PDF批注注释插件库:创建、保存和管理PDF注释批注(高亮、文本框、绘图、截屏、历史记录、橡皮檫)-pdf.js
|
JavaScript 定位技术
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案:svg + popper.js 定位引擎
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案:svg + popper.js 定位引擎
509 0
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案:svg + popper.js 定位引擎
|
JSON 前端开发 JavaScript
【2024-04-22 源码】最新PDF批注注释插件库,pdf.js插件库,纯前端离线JavaScript库(PDF高亮、下划线、橡皮擦、文本框、画笔、历史记录)
一款基于 pdf.js 开发的PDF批注插件库,支持纯离线内网部署,功能完善、强大且在不断升级,极易上手,欢迎关注!
426 4
【2024-04-22 源码】最新PDF批注注释插件库,pdf.js插件库,纯前端离线JavaScript库(PDF高亮、下划线、橡皮擦、文本框、画笔、历史记录)
|
前端开发 JavaScript
前端 JS 经典: 富文本高亮关键字
前端 JS 经典: 富文本高亮关键字
274 0
|
JSON JavaScript 前端开发
【2023-11-01】一款基于 pdf.js 的 PDF 批注注释插件库(纯JS、高亮、画笔、多边形、历史记录)
基于纯 JavaScript 和 PDF.js 做的一款 PDF 批注拓展插件-PDFMaster,一款仍能兼容支持IE 11的PDF批注插件,界面美观功能强大,有无开发经验都可以快速简单快速使用。
542 0
【2023-11-01】一款基于 pdf.js 的 PDF 批注注释插件库(纯JS、高亮、画笔、多边形、历史记录)
|
JavaScript 容器
js如何实现选项卡高亮+内容切换
js如何实现选项卡高亮+内容切换
283 0
|
JavaScript
js字体标红-高亮-自定义高亮-搜索高亮
js字体标红-高亮-自定义高亮-搜索高亮
|
JavaScript 前端开发 程序员
javascript插件库的应用:mapper.js实现图片热点的hover高亮效果
javascript插件库的应用:mapper.js实现图片热点的hover高亮效果
321 0
|
JavaScript 前端开发
JavaScript实战笔记(四) 选中文本高亮
JavaScript实战笔记(四) 选中文本高亮
381 0
|
JavaScript 前端开发
使用 JavaScript 中的 document 对象查找 HTML 元素,实现“登录”按钮的高亮特效 鼠标悬浮于“登录”按钮时,按钮高亮显示;
使用 JavaScript 中的 document 对象查找 HTML 元素,实现“登录”按钮的高亮特效 鼠标悬浮于“登录”按钮时,按钮高亮显示;
414 0
使用 JavaScript 中的 document 对象查找 HTML 元素,实现“登录”按钮的高亮特效 鼠标悬浮于“登录”按钮时,按钮高亮显示;

热门文章

最新文章