39_字体高亮
本题考点:indexOf、正则表达式、模板字符串
根据题目要求,实现搜索内容高亮的效果,核心步骤有:
- 首先通过indexOf判断搜索内容是否存在,如果存在,则通过正则全局搜索到目标内容并且替换为使用b标签加粗、样式设置之后的内容,这个步骤需要通过模板字符串和innerHTML来设置
- 当搜索内容不存在时,获取到所有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;"
}
}
}