再帰を用いた文字列の変換


再帰を利用して、HTMLのテキスト(タグで仕切られた範囲)を全て”[num]”に切り替えるプログラムを作りたいのですが、  
Javascriptが初めてなのもありまして、なかなか目標を達成することができません。  
例えば、

[code]

    入力
    ＜a＞はじめまして＜/a＞
    ＜a＞h_chicKerです＜/a＞
    ＜a＞よろしくお願いします。＜/a＞
    
    =>
    出力
    ＜a＞NUM:1＜/a＞
    ＜a＞NUM:2＜/a＞
    ＜a＞NUM:3＜/a＞
    
[/code]

のようにしたいです。  
変換するHTMLの例は  
<https://teratail.com>  
のトップページとします。  
再帰の雛形は作ってみました。

[code]

      <script type="text/javascript">
    
        function changeStr(element) {
    
        if (element == null) {
        var element = document.body;
        }
        if (element.childNodes.length > 0) {
        changeColor(element.firstChild);
        }
        if (element.nodeType == 1) {
        //ここに処理を書く？
        }
        }
    
      </script>
    
[/code]

なにかありましたら、随時補足させていただきます。  
よろしくお願いします。




再帰的に該当するノードをコレクションする[弾さん作成](http://blog.livedoor.jp/dankogai/js/resize.txt)`getElementsByFunction`のような関数を作っておくとこういう場合に便利です。  
（コレクションした後は単なるループで処理できます。このようにしない場合でも再帰的にノードを探索する例としてgetElementsByFunctionが参考になると思います。）  
以下の例はgetElementsByFunctionで指定したノード以下のテキストノードで改行以外のものを置き換えます。

[code]

    <html>
    <head>
    <title>example</title>
    <script type="text/javascript">
    var getElementsByFunction = function(root, func){
      var result = [];
      (function(node){
        var kids = node.childNodes;
        for (var i = 0, l = kids.length; i < l; i++){
          if (func(kids[i])) result[result.length] = kids[i];
          if (kids[i].hasChildNodes()) arguments.callee(kids[i]);
        }
      })(root);
      return result;
    };
    </script>
    <script type="text/javascript">
    function isTextNode(node){
     return node.nodeType == 3; //TEXT_NODE
    }
    function test(){
     var nodes = getElementsByFunction(document.getElementById("block1"), isTextNode);
     var j = 1;
     for(var i = 0; i < nodes.length; ++i){
      if(nodes[i].nodeValue != "\n")
       nodes[i].nodeValue = "NUM:" + j++;
     }
    }
    </script>
    </head>
    <body>
    <div id="block1"><p>text1</p>
    <a href=".">text2</a>
    <a href=".">text3</a>
    </div>
    <button onclick="test()">実行</button>
    
    </body>
    </html>
[/code]

