JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    </head>
    <body>
        <form action="javascript:tester();">
            <label for="query" title=" Alt+Q ">搜尋：<input id="query" size="25" accesskey="q" type="text"></label>
            <input value="開始" type="submit" /> <span id="matches"></span><br/>
            選項：
            <label for="cases"><input id="cases" type="checkbox">區分大小寫</label>
            <label for="regex"><input id="regex" type="checkbox">正規式</label>
        </form>
        
        <div id="div1">
            <a href="http://www.bliayad.org/articles/articles.htm">文章來源:http://www.bliayad.org/articles/articles.htm</a><br>
            僅供學術使用<br>
            
            <h1>何苦&lt;天才&gt;要第一名</h1>
            <h2>來源：網路流傳</h2>
            <p>老同學交了新女友，卻經常有空。<br>
                
                疊疊重複重複重複重複疊疊疊疊疊疊疊字疊字重複疊疊<br>
                
                English test<br>
                
                聽老同學說，他倆感情很要好，彼此心屬，極有婚嫁的契機。<br>
                
                <!--
                <object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/thOdWgS2B4s&amp;hl=zh_TW&amp;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/thOdWgS2B4s&amp;hl=zh_TW&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>
                -->
                於是，順理成章地認為，他們應該會膠膩在一起，水乳濃郁，哪曉得晚餐找他，週末找他，他總是可以。<br>
                
                有一天，老同學找我吃飯，返家的路上，我小心翼翼，怕傷他自尊，很客氣又故做不經心地問了一句：「你怎麼都這麼有空啊？」<br>
                
                原以為這個階段的情侶應該形影不離。<br>
                
                我有些擔心，再問：「女朋友呢？不用陪嗎？」<br>
                
                老同學態度自然，落落大方的回答：「她約人了啊。」<br>
                
                幾乎每個星期都是如此。<br>
                
               ...

CSS

b { background-color: #fcc; padding: 0 .1em 0 .1em; }

JavaScript

/**
* Configs
*/
var RESULT_TAG = "b";
var RESULT_ATTR = "hlite";

/**
* Helpers
*/
function $(id){ return document.getElementById(id); }

/**
* Main
*/

// 將正規式的特殊字元還原為一般字元
String.prototype.escapeRegExp = function() {
    return this.replace(/([.*+?^=!:${}()|[\]\/\\])/g, '\\$1');
};

function unhighlight() {
    var els = document.getElementsByTagName('*'), els2 = [];
    for (var i=0,I=els.length;i<I;++i) {
        if (els[i].getAttribute(RESULT_ATTR)) els2.push(els[i]);
    }
    for (var i=0,I=els2.length;i<I;++i) {
        var el = els2[i];
        var pre = el.previousSibling;
        var post = el.nextSibling;
        var content = el.firstChild.nodeValue;
        if (pre && pre.nodeName=='#text') {
            content = pre.nodeValue + content;
            pre.parentNode.removeChild(pre);
        }
        if (post && post.nodeName=='#text') {
            content = content + post.nodeValue;
            post.parentNode.removeChild(post);
        }
        el.parentNode.replaceChild(document.createTextNode(content),el);
    }
}

function highlight(obj, reg){
    var d = document;
    var o = [ obj || d.body ];  // 待處理陣列，由後往前，0-based
    var h = d.createElement(RESULT_TAG);  // 模板
    h.setAttribute(RESULT_ATTR,'1');
    var matched = 0;  // 匹配數
    var i = 0, el;
    do {
        el = o[i];
        if (el.nodeName=='#text') {
            highlight_text(el, reg);
        }
        else {
            // 將子元素加到待處理陣列
            var c = el.childNodes, j = c.length;
            while(j) { o[i++] = c[--j]; }
        }
    } while (i--)
        return matched;
    
    function highlight_text(obj, reg) {
        reg.lastIndex = 0;
        var l = reg.exec(obj.nodeValue);
        if( l !== null ) {
            var k = l[0].length;
            obj = obj.splitText( reg.lastIndex - k );  // Y = X.splitText(index) 會把 X 切成二個 node，執行後 X 為前面的，Y 為後面的
            if( obj.nodeValue.length > k ) o[i++] = obj.splitText(k);
            var t = h.cloneNode( true );
           ...