前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 本题目源自于牛客网 微信公众号前端小歌谣

题目

请补全JavaScript代码，实现一个搜索字体高亮的效果。要求如下：
1. 在input框中输入要搜索的内容，当点击查询按钮时，被搜索的字体样式变为加粗，背景色变为'yellow'
2. 重新输入搜索文字，点击查询按钮时，去掉上一次的搜索效果，高亮显示效果只加在本次搜索文字上
3. 如果搜索不到相关内容，清除之前的效果
注意：
1. 需要加粗的文字请使用b标签包裹
2. 必须使用DOM0级标准事件（onclick）

#yyds干货盘点# 前端歌谣的刷题之路-第一百一十一题-字体高亮_html

#yyds干货盘点# 前端歌谣的刷题之路-第一百一十一题-字体高亮_html_02

​编辑

 核心代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>字体高亮</title>
</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");
    btn.onclick = () => {
      if (text.innerText.indexOf(search.value) != -1) {
        text.innerHTML = text.innerText.replace(new RegExp(search.value, 'g'),
          `<b style='background-color:yellow; color:white;'>${search.value}</b>`)
      } else {
        let Btags = document.querySelectorAll("b")
        for (let i = 0; i < Btags.length; i++) {
          Btags[i].style.cssText = "background-color:transparent; color: unset; font-weight: unset;"</script>
</body>

</html>

#yyds干货盘点# 前端歌谣的刷题之路-第一百一十一题-字体高亮_搜索_03

总结

考察dom的使用