效果图：
一、只适用于找出中文
如果传入英文会特别麻烦，因为比如传个a，innerHtml匹配时会匹配到包含a的标签比如<span>、<a>等。
思路：
获取body的innerHtml，配合正则和字符串方法replace方法。
<!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>Document</title><style>.search {color: red;}</style></head><body><div id="text"><span>a</span><p>窗透初晓 日照西桥 云自摇 </p><p>想你当年荷风微摆的衣角 木雕流金 岁月涟漪 </p><p>窗透初晓 日照西桥 云自摇 </p><p>想你当年荷风微摆的衣角 木雕流金 岁月涟漪 </p><span>bbb</span></div><span>aabbb</span></body><script>function find(searchVal) {let html = document.getElementsByTagName("body")[0];var reg1 = /<script[^>]*>(.|\n)*<\/script>/gi;let htmlText = html.innerHTML.replace(reg1, "");let re = new RegExp(searchVal, "ig");html.innerHTML = htmlText.replace(re, `<span class="search">${searchVal}</span>`);}find("窗透");</script></html>
二、适用于中文和英文（但是英文不包括大小通用 ）
<!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>Document</title><style>.search {color: red;}</style></head><body><div id="text"><span>a</span><p>窗透初晓 日照西桥 云自摇 </p><p>想你当年荷风微摆的衣角 木雕流金 岁月涟漪 </p><p>窗透初晓 日照西桥 云自摇 </p><p>想你当年荷风微摆的衣角 木雕流金 岁月涟漪 </p><span>bbb</span></div><span>aabbb</span></body><script>find('窗透')find('aa')function find(searchVal, bgColor) {var oDiv = document.getElementsByTagName("body")[0];var sText = oDiv.innerHTML;var reg1 = /<script[^>]*>(.|\n)*<\/script>/gi; //去掉script标签 sText = sText.replace(reg1, "");var bgColor = bgColor || "orange";var sKey = "<span name='addSpan' style='background-color: " + bgColor + ";'>" + searchVal + "</span>";var num = -1;var rStr = new RegExp(searchVal, "g");var rHtml = new RegExp("\<.*?\>", "ig");//匹配html元素var aHtml = sText.match(rHtml); //存放html元素的数组sText = sText.replace(rHtml, '{~}'); //替换html标签sText = sText.replace(rStr, sKey); //替换keysText = sText.replace(/{~}/g, function () { //恢复html标签num++;return aHtml[num];});oDiv.innerHTML = sText;}</script></html>
三、适用于中文和英文（大小写也通用）
<!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>Document</title><style>.search {color: red;}</style></head><body><div id="text"><span>a</span><p>窗透初晓 日照西桥 云自摇 </p><p>想你当年荷风微摆的衣角 木雕流金 岁月涟漪 </p><p>窗透初晓 日照西桥 云自摇 </p><p>想你当年荷风微摆的衣角 木雕流金 岁月涟漪 </p><span>bbb</span></div><span>aabbb</span><span>AA7BB</span><span>aA7</span><span>aa7</span></body><script>find('aA7')function find(searchVal, bgColor) {var oDiv = document.getElementsByTagName("body")[0];var sText = oDiv.innerHTML;var reg1 = /<script[^>]*>(.|\n)*<\/script>/gi; //去掉script标签 sText = sText.replace(reg1, "");var bgColor = bgColor || "orange";var num = -1;var rStr = new RegExp(searchVal, "gi"); //匹配传入的搜索值不区分大小写 i表示不区分大小写，g表示全局搜索var rHtml = new RegExp("\<.*?\>", "ig");//匹配html元素var aHtml = sText.match(rHtml); //存放html元素的数组var arr = sText.match(rStr);a = -1;sText = sText.replace(rHtml, '{~}'); //替换html标签sText = sText.replace(rStr, function () {a++;return "<span name='addSpan' style='background-color: " + bgColor + ";'>" + arr[a] + "</span>"}); //替换keysText = sText.replace(/{~}/g, function () { //恢复html标签num++;return aHtml[num];});oDiv.innerHTML = sText;}</script></html>
总结：
之所以这么麻烦是因为英文还得去除不匹配标签，还得不区分大小写。如果只是中文则简单的多。我这个可能有些麻烦，如果有简单互相交流学习。
