DOMノードでテキストを操作するサンプル

DOMノードでテキストを操作するサンプルです。
クリックイベントを設定するのにjqueryを使っています。

タグの中のテキストも操作します。

こちらはタグを追加しています。
DOMノードでテキストを操作するサンプルです。
クリックイベントを設定するのにjqueryを使っています。

タグの中のテキストも操作します。

こちらはjqueryのみです。

変更対象の文字はタグで包まれている場合が多いです。

DOMノードでテキストを操作するサンプルです。
クリックイベントを設定するのにjqueryを使っています。

タグの中のテキストも操作します。

ソース。

<div id="domTest-display">
 DOMノードでテキストを操作するサンプルです。<br/>
 クリックイベントを設定するのにjqueryを使っています。<br/>
 <table>
  <tr><td>タグの中のテキストも操作します。</td></tr>
 </table>
</div>
<button id="domTest-start">スタート</button>
<script>
//<![CDATA[<!--
$("#domTest-start").click(function(){(function(currentElem){
    var textSearch = function(currentElem){
        var i;
        for (i = 0; i < currentElem.childNodes.length; i++)
        {
            if (currentElem.childNodes[i].nodeName == "#text" &&
                typeof currentElem.childNodes[i].nodeValue == "string")
            {
                currentElem.childNodes[i].nodeValue = currentElem.childNodes[i].nodeValue
                    .replace(/([^\x00-\x20\u3000-\u30FF]{1,99})/g, function(){
                        return "「" + arguments[1] + "」";
                    });
            }
            else
            {
                textSearch(currentElem.childNodes[i]);
            }
        }
    };
    textSearch(currentElem);
    $("#domTest-start").unbind("click").text("終了").css("cursor","default");
})(document.getElementById("domTest-display"));});
//-->]]>
</script>

<div id="domTest2-display">
 こちらはタグを追加しています。<br/>
 DOMノードでテキストを操作するサンプルです。<br/>
 クリックイベントを設定するのにjqueryを使っています。<br/>
 <table>
  <tr><td>タグの中のテキストも操作します。</td></tr>
 </table>
</div>
<button id="domTest2-start">スタート</button>
<script>
//<![CDATA[<!--
$("#domTest2-start").click(function(){(function(currentElem){
    var textSearch = function(currentElem){
        var i, x, elem;
        for (i = 0; i < currentElem.childNodes.length; i++)
        {
            if (currentElem.childNodes[i].nodeName == "#text" &&
                typeof currentElem.childNodes[i].nodeValue == "string")
            {
                x = i;
                elem = currentElem.childNodes[i];
                currentElem.childNodes[i].nodeValue
                    .replace(/([\x00-\x20\u3000-\u30FF]{0,99})([^\x00-\x20\u3000-\u30FF]{0,99})/g, function(){
                        if (typeof arguments[1] == "string" && arguments[1] != "")
                        {
                            $(elem).after(elem = document.createTextNode(arguments[1]));
                            i++;
                        }
                        if (typeof arguments[2] == "string" && arguments[2] != "")
                        {
                            $(elem).after($(elem = document.createElement("span"))
                                          .text("「" + arguments[2] + "」").css("background-color", "#ccf"));
                            i++;
                        }
                    });
                currentElem.removeChild(currentElem.childNodes[x]);
                i--;
            }
            else
            {
                textSearch(currentElem.childNodes[i]);
            }
        }
    };
    textSearch(currentElem);
    $("#domTest2-start").unbind("click").text("終了").css("cursor","default");
})(document.getElementById("domTest2-display"));});
//-->]]>
</script>

<div id="domTest3-display">
 <p>こちらはjqueryのみです。</p>
 <p>変更対象の文字はタグで包まれている場合が多いです。</p>
 DOMノードでテキストを操作するサンプルです。<br/>
 クリックイベントを設定するのにjqueryを使っています。<br/>
 <table>
  <tr><td>タグの中のテキストも操作します。</td></tr>
 </table>
</div>
<button id="domTest3-start">スタート</button>
<script>
//<![CDATA[<!--
$("#domTest3-start").click(function(){
    $("#domTest3-display").css("color", "#a33");
    $("#domTest3-display > p:nth-child(1)").css("color", "#3a3").prepend("「").append("」");
    $("#domTest3-display > p:nth-child(2)").css("color", "#33a").prepend("「").append("」");
    $("#domTest3-display > table > tbody > tr:nth-child(1) > td").css("color", "#33a").prepend("「").append("」");
    $("#domTest3-start").unbind("click").text("終了").css("cursor","default");
});
//-->]]>
</script>