JSFiddle - React, Tailwind, and code Playground

HTML

<div id='wrapper'>
    <a href="http://www.bliayad.org/articles/articles.htm">文章來源:http://www.bliayad.org/articles/articles.htm</a><br>
    僅供學術使用<br>
    #----div1開始
    <div id="div1">
        <h1>何苦要第一名</h1>
        <h2>來源：網路流傳</h2>
        <p>老同學交了新女友，卻經常有空。<br>
            聽老同學說，他倆感情很要好，彼此心屬，極有婚嫁的契機。<br>
            於是，順理成章地認為，他們應該會膠膩在一起，水乳濃郁，哪曉得晚餐找他，週末找他，他總是可以。<br>
            有一天，老同學找我吃飯，返家的路上，我小心翼翼，怕傷他自尊，很客氣又故做不經心地問了一句：「你怎麼都這麼有空啊？」<br>
            原以為這個階段的情侶應該形影不離。<br>
            我有些擔心，再問：「女朋友呢？不用陪嗎？」<br>
            老同學態度自然，落落大方的回答：「她約人了啊。」<br>
            幾乎每個星期都是如此。<br>
            他們之間並沒有問題，老同學說，兩人會在週五夜裡開車到海邊看海，靜靜坐在車裡不說一句話，只感溫暖親近，不覺奇怪尷尬；也會在週日到內湖公園溜溜，坐在草地上煮咖啡，器具平時就放在後車廂裡，為每一次男女主人的遇合，準備著，醞釀著。<br>
            興趣一致，工作相近，很有得聊；年紀相仿，觀點大同，鮮少爭執。<br>
            但是為什麼不常聚？<br>
            「她也很忙啊，常常跟朋友有約，吃飯啊，談事情啊…」老同學說來清淡，看不出有任何負面情緒。<br>
            我沒有接話，等了一會兒，按捺不住一份之於十年老同學的關心，又勇敢試探了一句：「她好像不是很以你為重…」<br>
            如此冒昧，只是不希望同學愛的寂寞，愛的孤單。<br>
            可是我的老同學，說了一句令我既驚喜又感動的話。<br>
            「或許這才是我們該學習的，學習不要去設定自己應該是對方最重要的人，學習不是非要霸佔對方大多數的時間，才是愛情。」<br>
            我聽了有些傻眼，轉頭看看我的老同學，用極為誠懇與欣賞的語氣說道：「你長大了耶…」<br>
            老同學敲了我一記，卻不住輕笑了起來。<br>
            其實，在男女互動上，老同學向來比我貼心，也比我成熟。<br>
            這些年，經過數次感情動盪，他更成長了，而且長得很好。<br>
            從前，他的綽號叫做「小乖」，前任女朋友取的。<br>
            總是女朋友的忠心跟隨者，不只人家需要他，他也需要這等被依賴的受用，雖然惹得同儕訕笑戲謔，他似乎不以為意。<br>
            一週七天，一年三百六十五天，十年三千六百五十天，很難找得到他。<br>
            陶醉於被需要的成就感裡，他，是女朋友的最重要依靠。<br>
            是一種甜蜜的負擔。<br>
            我不敢說好不好，也不敢評斷對不對，只是覺得如斯膠著，透露著某種程度「不健康」的訊息，不過，時間久了，他一往如昔被需要與被重視，情人間的關係沒有惡化，我們也不與置喙，遂習慣了這樣的模式，也加注了祝福。<br>
            長久如此，他怎能接受現今女友的「淡漠態度」與「獨立自主」？<br>
            這麼多空檔，這麼多自由，怎麼面對與習慣？<br>
            老同學今天竟然欣然而平和地告訴我：「或許這才是我們該學習的，學習自己不是，也不該是人家的第一名。」<br>
            曾經強烈地被需求，甚至沒了自己，而今岔然遇到主張自我與平等的女友，該如何轉換這般急煞的角度？<br>
            人是習性的動物，不容易的。<br>
            人也是虛榮的愛情俘虜，更加困難。<br>
            然而老同學不但轉過來了，而且轉的漂亮！<br>
            雙方互有自我，別離時長憶，有之於親人的信任與泰然；相聚時珍惜，更有之於愛人的甜蜜與悅喜。<br>
           ...

CSS

html, body {
margin:0;
padding:0;
}
#search_box {
position:fixed;
top:10px;
right:100px;
background:white;
padding:10px;
border:1px solid black;
}
* html {
overflow: hidden;
}
* html body,
* html #wrapper {
position:relative;
width:100%;
height:100%;
overflow:auto;
}
* html #search_box {
position:absolute;
padding:10px;
border:1px solid black;
}
h1 {
color:blue;
text-align:center;
font-size:xx-large;
}
h2 {
color:red;
text-align:center;
font-size:x-large;
}
.boldTag4Search{
color:white;
background:black;
}

JavaScript

/* --------------------config start------------------------ *//**
*  最後替換結果的標籤
*/
var resultTag="b";
/**
*  最後替換結果的 className
*/
var resultClass="boldTag4Search";


/* --------------------config end------------------------ */


/* --------------------helper start------------------------ */


if(!document.getElementsByClassName) {
    document.getElementsByClassName=function(classN) {
        var a=[];
        var query_results = document.getElementsByTagName('*');
        for(var i=0;i<query_results.length;i++) {
            if(query_results[i].className==classN)
                a.push(query_results[i]);
        }
        return a;
    };
}
function createReplacedTxtNode(newTxt){
    var replacedTxtNode = document.createTextNode(newTxt);
    var newNode=document.createElement(resultTag);
    newNode.className=resultClass;
    newNode.appendChild(replacedTxtNode);
    return newNode;
}

function prependWordTxt(prependWord){
    var newTxtNode=document.createTextNode(prependWord);
    return newTxtNode;
}

/**
* @param tag DomElement 要被刪除的元素
* @return 被刪除元素的文字
*/
function deleteTag(tag)
{
    if(tag==null || tag.nodeName!='#text')
    return "";

    var ret=tag.nodeValue;
    tag.parentNode.removeChild(tag);
    return ret;
}


/* --------------------helper end------------------------ */


function reverse_str()
{
    var tag, textNode, preText, nextText;
    var bt=document.getElementsByClassName(resultClass);
    
    for(var i=bt.length-1;i>=0;i--)
    {
        tag=bt[i];
        
         //還原時必須把前後的textNode合併       
        preText=deleteTag(tag.previousSibling);
        nextText=deleteTag(tag.nextSibling);
        var replaced_content = (tag.textContent ? tag.textContent : tag.innerText);
        textNode=document.createTextNode(preText + replaced_content  + nextText);
        tag.parentNode.replaceChild(textNode, tag);
    }
}

function search(target,search_str)
{
    var _tag=null,tag=target.firstChild;
    var regex_search= new...