牛客JS题（四十）字体高亮

news2024/11/14 20:02:12

注释很详细，直接上代码

涉及知识点：

正则表达式
逆向思路

题干：
在这里插入图片描述

我的答案

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <input type="text" />
    <button style="margin-right: 80px">查询</button>
    <div class="text" style="margin-top: 70px">
      牛客网隶属于北京牛客科技有限公司，牛客网成立于 2014 年 9
      月，是以科技和创新驱动的教育科技公司。牛客网坚持以前沿技术服务于技术、以人工智能和大数据提升学习效率，专注探索在线教育创新模式，致力于为技术求职者提供能力提升解决方案，同时为企业级用户提供更高效的招聘解决方案，并为二者搭建桥梁，构建从学习���职业的良性生态圈。
      发展至今，牛客网在技术类求职备考、社群交流、企业招聘服务等多个垂直领域影响力均在行业中遥遥领先，产品矩阵包括IT题库、在线编程练习、线上课程、交流社区、竞赛平台、笔面试服务、ATS系统等，用户覆盖全国高校百万IT学习者并在高速增长中，同时也为京东、百度、腾讯、滴滴、今日头条、华为等200多家企业提供校园招聘、编程竞赛等线上服务，并收获良好口碑。
    </div>

    <script>
        /**
         * 这题一眼匹配替换，两眼欸不对，还得清除之前的效果，
         * 哦吼，匹配换回去吗，万一原句子里面刚好就有一样的形式呢，岂不是给你换没了，并且复杂度也很高，
         * 怎么办呢？小友别被题目绕进去了，为什么要清除，我们开始存一份源文本，每次使用它进行替换不就行了，
         * 完全不用考虑清除之前的效果，对吧，
         * 接下来就是简单的替换逻辑喽，咱再加上点去前后空格，判断空字符串情况，注意一下类型转换就没啥了 
         */
      var text = document.querySelector(".text");
      var search = document.querySelector("input");
      const btn = document.querySelector("button");
      let sourceText = String(text.innerHTML);
      btn.onclick = () => {
        // 补全代码
        let key = String(search.value).trim();
        
        if (!key) return;

        let reg = new RegExp(key, 'g');
        text.innerHTML = sourceText.replace(
          reg,
          `<b style="background-color:yellow;">${key}</b>`
        );
      };
    </script>
  </body>
</html>