javascriptで、どう実装すればいけそうかについて質問させて下さい。

下記、HTMLのタグでdivタグの入れ子になっているタグを消したいです。

例)
...<div><span>ああああ</span><span>いいいい</span></div>...

...<div>ああああいいいい</div>...

※実際は、<span>タグがいくつあるか分からない(1コかもしれないし、5コかもしれない)し
 </div>タグの前後にもHTMLが続いています。それでもうまくいく書き方がほしいです。
 また、前後に続いていくHTMLでもdivタグ内の入れ子のタグは削除したい。

正規表現で置換できるかなと考えましたが
残念ながら、うまく書けずギブでした。。。。
※実現方法は、正規表現でなくても構いません。

PGMを実際に書いていただけると嬉しいですが、こうするといけるんじゃない?という
提案でも全然ありがたいです。

お手数おかけしますが、宜しくお願い致します。

回答の条件
  • 1人1回まで
  • 登録:
  • 終了:2016/06/01 01:49:46
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:a-kuma3 No.1

回答回数4971ベストアンサー獲得回数2153

ポイント500pt

DOM には、textContent という属性があるので、それが使えると思います。

    // 全ての DIV を取得
    var list = document.querySelectorAll("div");

    // 全ての DIV に対して実行
    Array.prototype.forEach.call(list, function(div) {
        // DIV の中にあるテキストで、HTML を置き換える(これだけ :-)
        div.innerHTML = div.textContent;
    });


jsFiddle で試したのがこちら。「edit」ボタンを押すと、HTML を書き換えます。
https://jsfiddle.net/gc0t7bo7/


もっとベタに書くと、こんな感じになります。

    function getText(node) {
        var e = node.firstChild;
        var txt = "";
        do {
            if (e.nodeType == 3) {
                txt += e.nodeValue;
            } else if (e.nodeType == 1) {
                txt += getText(e);
            }
        } while (e = e.nextSibling);    // == じゃないけど、間違いじゃない

        return txt;
    }

    // 全ての DIV を取得
    var list = document.querySelectorAll("div");

    // 全ての DIV に対して実行
    Array.prototype.forEach.call(list, function(div) {
        // DIV の中にあるテキストで、HTML を置き換える
        div.innerHTML = getText(div);
    });
id:misaex

ありがとうございます!
最高です!

2016/06/01 01:48:36

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません