1

再帰を利用して、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>

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

5
  • 1
    aタグだけでなく任意の末端のタグということですか?
    – BLUEPIXY
    Commented 2015年12月7日 15:57
  • 自前で書くよりjQueryを使って書く方が100倍楽だと思います。 Commented 2015年12月7日 16:20
  • teratail.com/questions/21987 参考
    – BLUEPIXY
    Commented 2015年12月7日 22:55
  • > BLUEPIXYさん そうですね! 任意のタグの文字列の変換が行いたいです。
    – chicKer
    Commented 2015年12月8日 0:55
  • SOでは>の代わりに@を使う様にしましょう。
    – BLUEPIXY
    Commented 2015年12月8日 11:02

3 件の回答 3

1

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

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

1
  • HTML上の改行をテキストノードにしているかどうかはブラウザによって違ったように思います。
    – BLUEPIXY
    Commented 2015年12月7日 17:08
0

例えば、のケースであれば下のコードで実装できます。

<div id="target">
  <a>aaa</a>
  <a>bbb</a>
  <a>ccc</a>
</div>

もし質問の意図と違っていたらコメントください。

function changeStr(element) {
  if (element == null) {
    var element = document.getElementById("target");
  }

  if (element.nodeType == 1) {
    Array.prototype.forEach.call(element.children, function(e, i) {
      e.textContent = "NUM:" + (i + 1);
    });
  }
};

function changeStr(element) {
  if (element == null) {
    var element = document.getElementById("target");
  }

  if (element.nodeType == 1) {
    Array.prototype.forEach.call(element.children, function(e, i) {
      e.textContent = "NUM:" + (i + 1);
    });
  }
};
<div id="target">
  <a>aaa</a>
  <a>bbb</a>
  <a>ccc</a>
  <p>ddd<b>eee</b>fff</p>
</div>
<button onclick="changeStr(null)">実行</button>


【実行前】

<div id="target">
  <a>aaa</a>
  <a>bbb</a>
  <a>ccc</a>
  <p>ddd<b>eee</b>fff</p>
</div>

【実行後】

<div id="target">
  <a>NUM:1</a>
  <a>NUM:2</a>
  <a>NUM:3</a>
  <p>NUM:4<b>NUM:5</b>NUM:6</p>
</div>

上記【実行前】、【実行後】を想定して書いてみましたがいかがでしょうか。

function changeStr(element) {
  if (element == null) {
    var element = document.getElementById("target");
  }

  if (element.nodeType == 1) {
    var result = {};

    result.index = 0;
    result.count = 1;
    result.str = element.innerHTML
      .replace(/\s*(<[a-z])/gi, "$1").trim()
      .replace(/>([^<]+)</g, ">NUM:<");

    do {
      result = _numIncrement(result.str, result.index, result.count);

      result.index = result.index + 1;
      result.count = result.count + 1;
    } while(result.index);

    element.innerHTML = result.str;
  }

  function _numIncrement(_str, _index, _count) {
    var _numIndex = _str.indexOf("NUM:", _index);
    var _before = _str.substr(0, _numIndex + 4);
    var _after = _str.substr(_numIndex + 4);

    if(_numIndex >= 0) {
      _str = _before + _count + _after;
    }

    return {"str": _str, "index": _numIndex, "count": _count};
  };
};
<div id="target">
  <a>aaa</a>
  <a>bbb</a>
  <a>ccc</a>
  <p>ddd<b>eee</b>fff</p>
</div>
<button onclick="changeStr(null)">実行</button>

4
  • 例えば<p>ddd<b>eee</b>fff</p> のような場合に期待する動作にならないと思いますので本質的にエレメントノードではなくテキストノードかどうかを調べるべきだと思います。
    – BLUEPIXY
    Commented 2015年12月8日 11:08
  • @BLUEPIXY 期待動作を確認できるようなテストケースを作成することは可能ですか?
    – a10a
    Commented 2015年12月9日 0:11
  • (期待動作については質問者に提供して貰う必要があります、とりあえず私の言う例を追加してみました。)テスト実行できるように編集してみました。(適宜変更下さい)、結果を見るとPタグの中身のbタグごと置き換えられてしまうのがわかると思います。私の思う期待動作は<p>NUM:4<b>NUM:5</b>NUM:6</p>のようなテキストを置き換えるもの。
    – BLUEPIXY
    Commented 2015年12月9日 0:24
  • @BLUEPIXY ありがとうございます。理解できました(一応僕の理解した内容を本文に追記しました)。改行も考慮するとなかなか難しそうですね。
    – a10a
    Commented 2015年12月9日 3:40
0

再帰の勉強をしているのでなければ、jQueryで簡単に実現可能です。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>
      function test() {
        $('#block1 *')
          .contents()
          .filter(function() {
            return this.nodeType==3 && $.trim($(this).text()).length > 0;
          })
          .each(function(index, value) {
            this.nodeValue = 'NUM:' + (index+1);
          });
      }
    </script>
  </head>
  <body>
    <div id="block1"><p>text1</p>
      <a href=".">text2</a>
      <a href=".">text3</a>
      <p>ddd<b>eee</b>fff</p>
    </div>
    <button onclick="test()">実行</button>
  </body>
</html>

出力

<div id="block1"><p>NUM:1</p>
      <a href=".">NUM:2</a>
      <a href=".">NUM:3</a>
      <p>NUM:4<b>NUM:6</b>NUM:5</p>
</div>
5
  • down voteするなら理由くらい書けばいいのに。 Commented 2015年12月9日 5:56
  • 既にコメントで明確にしてますけど、aタグのみではなくて(document.body以下の)任意のタグだと思いますよ。
    – BLUEPIXY
    Commented 2015年12月9日 7:22
  • なるほど。修正しました。勉強のために自分で実装したいというのでなければ、jQueryのような枯れたライブラリを使う方が良いと個人的には思いますけどね。読み手次第ですが。 Commented 2015年12月9日 18:00
  • えっと、既に他の方の回答で指摘しているようなネストしているタグで動作しません。
    – BLUEPIXY
    Commented 2015年12月9日 18:05
  • ネストに対応しました。質問が厳密に定義されていないので、これ以上修正はしません。NUMを見るとjQueryが幅優先でノードを探索していることが判って面白いですね。 Commented 2015年12月9日 23:49

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。