题解 | #字体高亮#

思路：p表示搜索框文本，s表示内容文本，首先使用s.indexOf(p)查找s中是否出现过p，如果出现过则使用new RegExp(p,'g')全局创建一个正则表达式，然后使用replace方法将s中的p全部替换为带样式的html内容，再将其更新为内容html，反之没有出现过则搜索所有b标签，并将其background-color样式设置为''或者透明。

<script>
   var text = document.querySelector(".text");
   var search = document.querySelector("input");
   const btn = document.querySelector("button");
   btn.onclick = () => {
     let s=text.innerText
     let p=search.value
     //加上g后replace才能全局匹配喔
     //注意 找到一次则替换全部
     if(s.indexOf(p)!=-1)
     {
        //使用输入框的值创建全局匹配的正则表达式对象
        let match=new RegExp(p,'g')
        let news=`<b style='background-color:yellow'>${p}</b>`
        text.innerHTML=s.replace(match,news)
     }
     else
     {
        let btags=document.querySelectorAll("b")
        for(let i=0;i<btags.length;i++)
           btags[i].style.backgroundColor=''
     }
  }
</script>

总结：s.indexOf(p)查找s中是否出现过p，如果出现过则返回第一次出现的下标，反之则返回-1；new RegExp (p,'g')全局创建一个正则表达式，其中p是匹配内容；str.replace(oldv,newv)将str中的oldv替换为newv。添加样式是在文本内容中替换搜索内容为带对应样式的搜索内容，由于替换后的带样式，故只能将其更新为样式文本；删除样式是找到所有带b标签的元素，并遍历他们将其背景颜色设为空或者透明。注意，到底是在文本上操作还是在内容上操作。