关于 RegExp()和$的奇妙故事

最新推荐文章于 2021-08-30 16:12:30 发布

一条小罗非

最新推荐文章于 2021-08-30 16:12:30 发布

阅读量294

点赞数 2

文章标签： RegExp innerText innerHTML

本文链接：https://blog.csdn.net/weixin_38689203/article/details/101017288

版权

故事从一个模糊输入提示的功能说起

先看看效果，输入匹配相同的部分
代码是这样的

<!-- html部分 -->
<body>
   <input type="text" id="put"/>
   <p id="pp">abc</p>
</body>

//js部分
<script type="text/javascript">
 document.getElementById("put").addEventListener('keyup',function(e){
    var str = document.getElementById("put").value;
    var reg = RegExp('('+str+')','g');
    var one = document.getElementsByTagName("p")[0];
    var newstr = one.innerText.replace(reg,'<font style="color:red">$1</font>');
    one.innerHTML = newstr;
  })
</script>

(๑•̀ㅂ•́)و✧ 实现原理很简单，其实就是把输入的部分作为正则匹配，然后给输入部分加上font标签修饰变色。

<font style="color:red">输入部分</font>

✧(≖ ◡ ≖✿) 走下流程：
1.字符串的内容是abc
2.我输入了a
3.abc 中的 a 符合 replace(/(a)/g,"＜font style=“color:red"＞括号部分＜/font＞”)
4.abc 的 a 变红了，后台可以看到如下组成代码：

<p id="pp">
  <font style="color:red">a</font>
  bc
</p>

✧(≖ ◡ ≖✿) 哦吼好像没啥问题，目前为止都好理解。但是想了想好像有什么问题。
如果说输入 a 让文本变中的 a 变红，那删除之后是怎么让文本变回去黑色的呢?整个变换的过程都用了同一句话而已呀：

    var newstr = one.innerText.replace(reg,'<font style="color:red">$1</font>');
    one.innerHTML = newstr;

Σ( ° △ °|||)︴讲道理，删去文字之后剩下的内容为空，也就是字符串中为空的部分都应该被替换，但不应该把 a 拿出来了呀？相当于只是在每个空白处加了这段代码＜font style="color:red"＞＜/font＞？
◐▽◑ 直到留意到了 innerText 和 innerHTML 的不同。这两句话，在制作匹配后的字符串newstr的时候是采用innerText，innerText取到的值是忽视子元素标签的存在的，直接隔空取文字。innerHTML则不忽略标签。例如:

<p id="pp"><font>abc</font></p>
//document.getElementById("pp").innerText  == "abc"
//document.getElementById("pp").innerHTML  == "<font>abc</font>"

╰(￣▽￣)╭ 所以说每次取到字符串的文字都是 innerText 都是 abc，这个问题就容易理解啦~

一条小罗非

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于 RegExp()和$的奇妙故事

故事从一个模糊输入提示的功能说起先看看效果，输入匹配相同的部分代码是这样的<body> <input type="text" id="put"/> <p id="pp">abc</p></body>//js部分<script type="text/javas...
复制链接

扫一扫