需要将字符串
为中华崛起而写代码，此刻我想要高亮两个字“中国”<加油！>,但是“中国”后面的箭头<需要继续显示>
中的
中国
高亮加粗显示，但是又不想把< >符号误认为html节点标签渲染出来，代码如下，主要是用
.replace(/\ /g, " ").replace(/</g, "<").replace(/>/g, ">");
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>高亮显示搜索出来的文本</title> <style> .sg-search-word-highlight { display: inline-block; font-weight: bold; box-sizing: border-box; padding: 0 5px; border-radius: 4px; border: 2px solid white; box-shadow: 0 0 6px rgba(0, 0, 0, 0.4); color: white; background-color: #F56C6C; } </style> </head> <body> <div class="p1"></div> <div class="p2"></div> </body> <script> let replaceHTMLChar = s => s.toString().replace(/\ /g, " ").replace(/</g, "<").replace(/>/g, ">"); let highLightMatchString = (originStr, matchStr, customClass = "") => { customClass === true && (customClass = "sg-search-word-highlight"); matchStr && (matchStr = matchStr.replace(/\(/g, "\\(").replace(/\)/g, "\\)").replace(/\[/g, "\\[").replace(/\]/g, "\\]"));//避免括号被误认为是正则表达式的一部分 let newRepStr = customClass ? `<span class=${customClass}>${replaceHTMLChar(matchStr)}</span>` : `<b style='color:red;font-weight:bold;'>${replaceHTMLChar(matchStr)}</b>`; return replaceHTMLChar(originStr).replace(new RegExp(replaceHTMLChar(matchStr), "gi"), newRepStr); }; //测试---------------------------------------- document.querySelector(".p1").innerHTML = highLightMatchString("为中华崛起而写代码，此刻我想要高亮两个字“中国”<加油！>,但是“中国”后面的箭头<需要继续显示>", "中国"); document.querySelector(".p2").innerHTML = highLightMatchString("为中华崛起而写代码，此刻我想要高亮两个字“中国”<加油！>,但是“中国”后面的箭头<需要继续显示>", "中国", true); </script> </body> </html>
浏览器显示效果：
