javascriptで､どう実装すればいけそうかについて質問させて下さい｡下記､HTMLのﾀｸﾞでdivﾀｸﾞの入れ子になっているﾀｸﾞを消したいです｡例) ...<div><span>ああああ</s…

javascriptで､どう実装すればいけそうかについて質問させて下さい｡
下記､HTMLのﾀｸﾞでdivﾀｸﾞの入れ子になっているﾀｸﾞを消したいです｡

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

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

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

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

お手数おかけしますが､宜しくお願い致します｡

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);
 });