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

Question

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

入力
＜a＞はじめまして＜/a＞
＜a＞h_chicKerです＜/a＞
＜a＞よろしくお願いします。＜/a＞

=>
出力
＜a＞NUM:1＜/a＞
＜a＞NUM:2＜/a＞
＜a＞NUM:3＜/a＞

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

  <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>

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

Answer 1

HTMLのテキスト(タグで仕切られた範囲)を全て”[num]”に切り替えるプログラムを作りたい

その条件ですと、結果は次のようになります。

入力
<a>はじめまして</a>
<a>h_chicKerです</a>
<a>よろしくお願いします。</a>

出力
<a>NUM:1</a>NUM:2<a>NUM:3</a>NUM:4<a>NUM:5</a>

「置換する条件」と「期待する結果」に相違があるようですので
アルゴリズムを見直したほうがよいように思います。
a要素直下のテキストノード置換を求めるなら document.getElementsByTagName('a') でも良いですね。

Re: score 5 さん

Answer 2

プログラミング言語はロジックの表現/実現手段でしかないため、Javascript が初めてだからできない。というのは理由としては如何なものかと？ロジックの整理なり、組み立て能力なり、知識と活用方法が噛み合っていないだけでしょう。様々な言語で色んなプログラムを書くと良いですよ。

とは言え、再帰処理は慣れるまで難しい概念だと私は感じます。以下にひな形を書いていますので、参考にしてみてください。これがズバリの答えではありません。

function _(e) {
  if (null == e) {
    // 引数が省略されている場合には document.body を無条件で指定する
    _(document.body);
    return;
  }

  if (0 < e.childNodes.length) {
    // childNodes を持つ場合は走査して再帰処理する
    for (var i=0; i<e.childNodes.length; i++) _(e.childNodes[i]);
  }

  console.log(e);
  // [TODO] 条件に一致する要素に対して処理を実施する ([num] に置き換える etc...)
}

上記のロジックであれば、指定された要素を含めた全要素を走査するため『テキストを全て "[num]" に置き換える』という条件を（この部分の仕様が曖昧ですので）ご自身で調整すればよろしいかと思います。全体に適用するという意味では、それ以外のパターンにも応用は効くと思います。