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

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

题目

请补全JavaScript代码,实现一个搜索字体高亮的效果。要求如下:

1. 在input框中输入要搜索的内容,当点击查询按钮时,被搜索的字体样式变为加粗,背景色变为'yellow'

2. 重新输入搜索文字,点击查询按钮时,去掉上一次的搜索效果,高亮显示效果只加在本次搜索文字上

3. 如果搜索不到相关内容,清除之前的效果

注意:

1. 需要加粗的文字请使用b标签包裹

2. 必须使用DOM0级标准事件(onclick)

image.png

编辑

核心代码

<!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>

总结

考察dom的使用

相关文章
|
前端开发
【前端】elementUI表格根据状态显示不同的字体颜色
【前端】elementUI表格根据状态显示不同的字体颜色
343 1
|
3月前
|
前端开发
前端引入字体文件
文章介绍了如何在前端项目中引入字体文件,并展示了具体的HTML和CSS代码示例,包括如何使用`@font-face`规则来定义字体和在页面中应用自定义字体。
84 1
前端引入字体文件
|
3月前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
76 28
|
7月前
|
JSON 前端开发 JavaScript
【2024-04-22 源码】最新PDF批注注释插件库,pdf.js插件库,纯前端离线JavaScript库(PDF高亮、下划线、橡皮擦、文本框、画笔、历史记录)
一款基于 pdf.js 开发的PDF批注插件库,支持纯离线内网部署,功能完善、强大且在不断升级,极易上手,欢迎关注!
207 4
【2024-04-22 源码】最新PDF批注注释插件库,pdf.js插件库,纯前端离线JavaScript库(PDF高亮、下划线、橡皮擦、文本框、画笔、历史记录)
|
7月前
|
前端开发 开发者 UED
【Flutter前端技术开发专栏】Flutter中的图标、字体与样式管理
【4月更文挑战第30天】本文介绍了在Flutter中管理图标、字体和样式的做法。Flutter提供`Icons`类用于内置矢量图标,支持第三方图标库如FontAwesome。自定义字体可通过添加字体文件至`assets`目录并配置`pubspec.yaml`,然后使用`TextStyle`设置。借助`ThemeData`,开发者能统一管理应用主题样式,局部样式可覆盖全局。通过集中管理样式,提升代码复用性和应用一致性。
189 0
【Flutter前端技术开发专栏】Flutter中的图标、字体与样式管理
|
7月前
|
编解码 前端开发 iOS开发
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
114 1
|
7月前
|
前端开发 JavaScript
前端 JS 经典: 富文本高亮关键字
前端 JS 经典: 富文本高亮关键字
143 0
|
小程序 前端开发
前端开发小程序时使用自定义字体
不管在pc端还是移动端,开发一些图表统计或者数字显示的时候,往往UI效果里需要一些自定义字体来增加显示效果和美观度,各个系统提供的系统字体很难满足需求
200 1
|
7月前
|
前端开发
【零基础入门前端系列】—基础选择器和字体属性(十)
【零基础入门前端系列】—基础选择器和字体属性(十)
|
人工智能 前端开发
前端封装库/工具库的字体/图标之Iconfont
在前端开发中,图标是不可或缺的一部分。传统的图片素材虽然能够满足需求,但使用方式较为繁琐,还会增大项目的体积和加载时间。随着前端技术的发展,字体/图标库逐渐成为了替代传统图片素材的新选择。其中一个非常流行的字体/图标库就是 Iconfont。
367 1