JS39. 字体高亮
描述
请补全JavaScript代码，实现一个搜索字体高亮的效果。要求如下：HTML/CSS/JavaScript 解法, 执行用时: 1693ms, 内存消耗: 77828KB, 提交时间: 2022-02-09
{"css":"","js":"","html":"<!--\n * @Author: your name\n * @Date: 2022-02-09 09:37:38\n * @LastEditTime: 2022-02-09 09:53:04\n * @LastEditors: Please set LastEditors\n * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE\n * @FilePath: \\git-md\\html+js\\字体高亮.html\n-->\n<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n </head>\n <body>\n <input type=\"text\">\n <button style=\"margin-right: 80px\">查询</button>\n <div class=\"text\" style=\"margin-top: 70px\">\n 牛客网隶属于北京牛客科技有限公司，牛客网成立于 2014 年 9 月，是以科技和创新驱动的教育科技公司。牛客网坚持以前沿技术服务于技术、以人工智能和大数据提升学习效率，专注探索在线教育创新模式，致力于为技术求职者提供能力提升解决方案，同时为企业级用户提供更高效的招聘解决方案，并为二者搭建桥梁，构建从学习到职业的良性生态圈。\n 发展至今，牛客网在技术类求职备考、社群交流、企业招聘服务等多个垂直领域影响力均在行业中遥遥领先，产品矩阵包括IT题库、在线编程练习、线上课程、交流社区、竞赛平台、笔面试服务、ATS系统等，用户覆盖全国高校百万IT学习者并在高速增长中，同时也为京东、百度、腾讯、滴滴、今日头条、华为等200多家企业提供校园招聘、编程竞赛等线上服务，并收获良好口碑。\n </div>\n\n <script>\n var text = document.querySelector(\".text\");\n var search = document.querySelector(\"input\");\n const btn = document.querySelector(\"button\");\n btn.onclick = () => {\n // 补全代码\n let value = search.value;\n let textValue = text.innerText;\n text.innerHTML = textValue.replace(new RegExp(value, 'g'), `<b style=\"background-color:yellow\">${value}</b>`)\n }\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1756ms, 内存消耗: 77772KB, 提交时间: 2021-12-19
{"css":"","js":"","html":"<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n </head>\n <body>\n <input type=\"text\">\n <button style=\"margin-right: 80px\">查询</button>\n <div class=\"text\" style=\"margin-top: 70px\">\n 牛客网隶属于北京牛客科技有限公司，牛客网成立于 2014 年 9 月，是以科技和创新驱动的教育科技公司。牛客网坚持以前沿技术服务于技术、以人工智能和大数据提升学习效率，专注探索在线教育创新模式，致力于为技术求职者提供能力提升解决方案，同时为企业级用户提供更高效的招聘解决方案，并为二者搭建桥梁，构建从学习到职业的良性生态圈。\n 发展至今，牛客网在技术类求职备考、社群交流、企业招聘服务等多个垂直领域影响力均在行业中遥遥领先，产品矩阵包括IT题库、在线编程练习、线上课程、交流社区、竞赛平台、笔面试服务、ATS系统等，用户覆盖全国高校百万IT学习者并在高速增长中，同时也为京东、百度、腾讯、滴滴、今日头条、华为等200多家企业提供校园招聘、编程竞赛等线上服务，并收获良好口碑。\n </div>\n\n <script>\n var text = document.querySelector(\".text\");\n var search = document.querySelector(\"input\");\n const btn = document.querySelector(\"button\");\n btn.onclick = () => {\n if (text.innerText.indexOf(search.value) != -1) {\n text.innerHTML = text.innerText.replace(new RegExp(search.value, 'g'), `<b style='background-color:yellow; color:white;'>${search.value}</b>`)\n } else {\n let Btags = document.querySelectorAll(\"b\")\n for (let i = 0; i < Btags.length; i++) {\n Btags[i].style.cssText = \"background-color:transparent; color: unset; font-weight: unset;\"\n }\n }\n}\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1758ms, 内存消耗: 77908KB, 提交时间: 2021-12-16
{"css":"","js":"","html":"<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n </head>\n <body>\n <input type=\"text\">\n <button style=\"margin-right: 80px\">查询</button>\n <div class=\"text\" style=\"margin-top: 70px\">\n 牛客网隶属于北京牛客科技有限公司，牛客网成立于 2014 年 9 月，是以科技和创新驱动的教育科技公司。牛客网坚持以前沿技术服务于技术、以人工智能和大数据提升学习效率，专注探索在线教育创新模式，致力于为技术求职者提供能力提升解决方案，同时为企业级用户提供更高效的招聘解决方案，并为二者搭建桥梁，构建从学习到职业的良性生态圈。\n 发展至今，牛客网在技术类求职备考、社群交流、企业招聘服务等多个垂直领域影响力均在行业中遥遥领先，产品矩阵包括IT题库、在线编程练习、线上课程、交流社区、竞赛平台、笔面试服务、ATS系统等，用户覆盖全国高校百万IT学习者并在高速增长中，同时也为京东、百度、腾讯、滴滴、今日头条、华为等200多家企业提供校园招聘、编程竞赛等线上服务，并收获良好口碑。\n </div>\n\n <script>\n var text = document.querySelector(\".text\");\n var search = document.querySelector(\"input\");\n const btn = document.querySelector(\"button\");\n btn.onclick = () => {\n // 补全代码\n let value = search.value;\n if(value == '' || text.innerText.search(value) == -1) {\n text.innerHTML = text.innerText;\n };\n if(text.innerText.search(value) > -1){\n text.innerHTML = text.innerText;\n let reg = new RegExp(value,'g')\n text.innerHTML = text.innerHTML.replace(reg,`<b style='background:yellow;'>${value}</b>`);\n }\n }\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1759ms, 内存消耗: 77772KB, 提交时间: 2021-12-04
{"css":"","js":"","html":"<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n </head>\n <body>\n <input type=\"text\">\n <button style=\"margin-right: 80px\">查询</button>\n <div class=\"text\" style=\"margin-top: 70px\">\n 牛客网隶属于北京牛客科技有限公司，牛客网成立于 2014 年 9 月，是以科技和创新驱动的教育科技公司。牛客网坚持以前沿技术服务于技术、以人工智能和大数据提升学习效率，专注探索在线教育创新模式，致力于为技术求职者提供能力提升解决方案，同时为企业级用户提供更高效的招聘解决方案，并为二者搭建桥梁，构建从学习���职业的良性生态圈。\n 发展至今，牛客网在技术类求职备考、社群交流、企业招聘服务等多个垂直领域影响力均在行业中遥遥领先，产品矩阵包括IT题库、在线编程练习、线上课程、交流社区、竞赛平台、笔面试服务、ATS系统等，用户覆盖全国高校百万IT学习者并在高速增长中，同时也为京东、百度、腾讯、滴滴、今日头条、华为等200多家企业提供校园招聘、编程竞赛等线上服务，并收获良好口碑。\n </div>\n\n <script>\n var text = document.querySelector(\".text\");\n var search = document.querySelector(\"input\");\n const btn = document.querySelector(\"button\");\n btn.onclick = () => {\n // 补全代码\n if (text.innerText.indexOf(search.value) != -1) {\n text.innerHTML = text.innerText.replace(new RegExp(search.value, 'g'), `<b style='background-color:yellow; color:white;'>${search.value}</b>`)\n } else {\n let Btags = document.querySelectorAll(\"b\")\n for (let i = 0; i < Btags.length; i++) {\n Btags[i].style.cssText = \"background-color:transparent; color: unset; font-weight: unset;\"\n }\n }\n }\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1760ms, 内存消耗: 77764KB, 提交时间: 2021-12-09
{"css":"","js":"","html":"<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n </head>\n <body>\n <input type=\"text\">\n <button style=\"margin-right: 80px\">查询</button>\n <div class=\"text\" style=\"margin-top: 70px\">\n 牛客网隶属于北京牛客科技有限公司，牛客网成立于 2014 年 9 月，是以科技和创新驱动的教育科技公司。牛客网坚持以前沿技术服务于技术、以人工智能和大数据提升学习效率，专注探索在线教育创新模式，致力于为技术求职者提供能力提升解决方案，同时为企业级用户提供更高效的招聘解决方案，并为二者搭建桥梁，构建从学习到职业的良性生态圈。\n 发展至今，牛客网在技术类求职备考、社群交流、企业招聘服务等多个垂直领域影响力均在行业中遥遥领先，产品矩阵包括IT题库、在线编程练习、线上课程、交流社区、竞赛平台、笔面试服务、ATS系统等，用户覆盖全国高校百万IT学习者并在高速增长中，同时也为京东、百度、腾讯、滴滴、今日头条、华为等200多家企业提供校园招聘、编程竞赛等线上服务，并收获良好口碑。\n </div>\n\n <script>\n var text = document.querySelector(\".text\");\n var search = document.querySelector(\"input\");\n const btn = document.querySelector(\"button\");\n btn.onclick = () => {\n // 补全代码\n let newStr = ''\n let str = text.innerHTML;\n let searchStr = search.value;\n // var reg = new RegExp(searchStr,\"g\")\n // let arr = str.match(reg);\n let arr = str.split(searchStr);\n console.log(arr);\n arr.forEach((item,index)=>{\n \n if(index == arr.length-1){\n console.log(index);\n newStr += item;\n }else{\n newStr += item+`<b style=\"background-color:yellow; font-weight: bold;\">${searchStr}</b>`;\n }\n })\n text.innerHTML = newStr;\n }\n </script>\n </body>\n</html>","libs":[]}