39_字体高亮

本题考点:indexOf、正则表达式、模板字符串

根据题目要求,实现搜索内容高亮的效果,核心步骤有:

  1. 首先通过indexOf判断搜索内容是否存在,如果存在,则通过正则全局搜索到目标内容并且替换为使用b标签加粗、样式设置之后的内容,这个步骤需要通过模板字符串和innerHTML来设置
  2. 当搜索内容不存在时,获取到所有b标签并且重置b标签的样式

参考答案

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;"
        }
    }
}