当前位置:Gxlcms > JavaScript > JavaScript之replace实现搜索关键字高亮显示方法

JavaScript之replace实现搜索关键字高亮显示方法

时间:2021-07-01 10:21:17 帮助过:4人阅读

正则表达式是字符串处理工具中强有力的工具.也有人认为这只是一个小玩具,但不管怎么说都离不开它.本文主要介绍的是JavaScript的正则表达式的replace方法 ,和实现搜索关键字高亮的功能.先介绍一下正则表达式的replace方法,具体内容详情大家参考下本文,希望能帮助到大家。

前言

先介绍一下正则表达式的replace方法

replace介绍

replace介绍

w3school原文链接介绍

正则表达式如何使用特殊字符$来表示原来的文本,这是实现搜索高亮的关键,

  1. var str = "asad sad 123 sd qwe21";
  2. str.replace(/\d+/img,"数字");
  3. //这里正确的匹配到了数字,且替换成了中文的数字
  4. console.log(str);//"asad sad 数字 sd qwe数字"
  5. ------------------------------------------------------
  6. //看一下如何使用$1,表示被捕获的字符串
  7. var str = "asad sad 123 sd qwe21";
  8. str.replace(/\d+/img,"数字$1数字");
  9. console.log(str);//"asad sad 数字$1数字 sd qwe数字$1数字"
  10. //很显然并没有成功,$1 还是$1,那么如何正确使用呢?
  11. ------------------------------------------------------
  12. var str = "asad sad 123 sd qwe21";
  13. str.replace(/(\d+)/img,"数字$1数字");
  14. //这里就正确的匹配了数字并且用$1 表示原字符串并替换
  15. console.log(str);///"asad sad 数字123数字 sd qwe数字21数字"
  16. /*
  17. ()在正则里面表示捕获性元组,可以用$1 特殊字符来表示被替换的内容,可以有多个()元组,也就是可以有多个$1,$2 */

开始小试身手

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. </head>
  5. <body>
  6. <style>
  7. b{
  8. color:red;
  9. }
  10. </style>
  11. <p id="poetry">
  12. 春江花月夜<br>
  13. 作者:张若虚<br>
  14. 春江潮水连海平,海上明月共潮生。 <br>
  15. 滟滟随波千万里,何处春江无月明! <br>
  16. 江流宛转绕芳甸,月照花林皆似霰; <br>
  17. 空里流霜不觉飞,汀上白沙看不见。 <br>
  18. 江天一色无纤尘,皎皎空中孤月轮。 <br>
  19. 江畔何人初见月?江月何年初照人? <br>
  20. 人生代代无穷已,江月年年只相似。 <br>
  21. </p>
  22. <input type ="text" id="input" />
  23. </body>
  24. </html>
  25. <script>
  26. //input 输入要查找的字符串
  27. input.onchange = function(){
  28. //获取要查找的字符串
  29. var searchVal = input.value;
  30. // 获取要查找的内容
  31. var text = poetry.innerHTML;
  32. //将之前的查找高亮的字符串,取消高亮
  33. text = text.replace(/<b[^>]*>([^>]*)<\/b[^>]*>/ig,"$1");
  34. poetry.innerHTML = text;
  35. //初始化正则表达式,加上括号(),形成可捕获元组.ig表示全局匹配和不区分大小写
  36. var reg = new RegExp("("+searchVal +")","ig");
  37. //高亮要查找的字符串
  38. text = text.replace(reg,"<b>$1</b>");
  39. poetry.innerHTML = text;
  40. }
  41. </script>

相关推荐:

ES6 Class 中的 super 关键字详解

PHP关键字标红处理类

Java中关于this关键字的使用详解

以上就是JavaScript之replace实现搜索关键字高亮显示方法的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行