連続する同じ要素をまとめる(解決済み)

Question

前提・実現したいこと

<strong>1</strong>
<strong>2</strong>
<strong>3</strong>
4
<strong>5</strong>

とあったときに

<strong>123</strong>
4
<strong>5</strong>

としたい

###実現したい経緯
contenteditableを用いた、ｴﾃﾞｨﾀを作成している際に、strongｴﾚﾒﾝﾄとtextﾉｰﾄﾞが乱立してしまい。狙っている挙動（strongの取付取り外し）ができない場合が発生したため。

###試したこと
調べたとことnormalize()を使用することで回避できるとのことだったが、回避はできなかった

Comments

[m.ts10806]

HTMLがどのように出力されるかによるのではないでしょうか。
それ次第で、出力後にJavaScriptでわざわざ対応する必要はないかと思います。
あと、自身が調べたこと試したことは必ず記載してください。丸投げの作業依頼です。
質問内容もないです。

[armadillo]

なるほど、直します

[m.ts10806]

ご自身で試したコードを提示してください。
「調べたこと」もキーワードや出典（URL）が提示されないと「そのやり方や記事で解決できるか」誰も判断できませんので、明示してください。

[m.ts10806]

あとできればパターンケースをもっとあげた方がいいかもしれません。
具体例をいくつか。あるパターンに特化した作りをしてしまうと副作用や不具合で使えないということになるので。

[m.ts10806]

自己解決にも手順があります。
https://teratail.com/help#resolve-myself

[armadillo]

自己解決した際にも手順があったのですね、知らなかったです。教えていただきありがとうございます！

[armadillo]

>あとできればパターンケースをもっとあげた方がいいかもしれません。
具体例をいくつか。あるパターンに特化した作りをしてしまうと副作用や不具合で使えないということになるので。
>ご自身で試したコードを提示してください。
「調べたこと」もキーワードや出典（URL）が提示されないと「そのやり方や記事で解決できるか」誰も判断できませんので、明示してください。

なるほど参考になります

[m.ts10806]

で、いつまで「受付中」なんでしょうか。

[armadillo]

申し訳ないです。解決済みにしました。ご指導していただきありがとうございます

Answer 1

ノードの考え方が甘いですね、テキストノード(命題で言う4のところ)まで取りたいなら
タグとタグの間の改行文字などもすべてテキストノードで取得されることを理解してください

Comments

[yambejp]

<script>
window.addEventListener('DOMContentLoaded', ()=>{
var nodes=document.querySelector('#target').childNodes;
console.log(nodes);
});
</script>
<div id="target">
<strong>1</strong>
<strong>2</strong>
<strong>3</strong>
4
<strong>5</strong>
</div>

[armadillo]

確かに上記のhtmlだとtextﾉｰﾄﾞが入っているようになってますね、developerﾂｰﾙの表示をそのまま持ってきてしまいました。

[armadillo]

なるほど、一度、childNodesを取得しなおすことで、連続する同じ要素同士をつなぐことができるのですね（まちがっていたらすいません）

[yambejp]

ちょっと冗長で例外処理とかとっぱらっていますがこんな感じで

<script>
window.addEventListener('DOMContentLoaded', ()=>{
var t=document.querySelector('#target');
var orgNodes=[...t.childNodes].filter(x=>{
return x.nodeName!="#text" || !/^\s+$/.test(x.nodeValue);
});
t.parentNode.replaceChild(t.cloneNode(false),t);
var newNodes=[];
var prev={nodeName:null};
while(n=orgNodes.shift()){
if(n.nodeName!==prev.nodeName){
newNodes.push(n);
}else{
newNodes[newNodes.length-1].textContent+=n.textContent;
}
prev=n;
};
newNodes.reduce((x,y)=>(x.appendChild(y),x),document.querySelector('#target'));
});
</script>
<div id="target">
<strong>1</strong>
<strong>2</strong>
<strong>3</strong>
4
<div>5</div>
<div>6</div>
<span>7</span>
<span>8</span>
<span>9</span>
</div>

Answer 2

const parent = document.getElementById("parent");
function normalize_all(){
  parent.childNodes.forEach(function (currentValue, currentIndex, listObj) {
      console.log("currentValue.childNodes.length");
      console.log(currentValue.childNodes.length);
      let j;
      for(let i = 0; i < currentValue.childNodes.length; i++){
        j = 1;
        while(currentValue.childNodes[i].className === currentValue.childNodes[i + j].className){
          currentValue.childNodes[i].textContent = currentValue.childNodes[i].textContent + currentValue.childNodes[i + j].textContent;
          currentValue.removeChild(currentValue.childNodes[i + j]);
          j ++;
        }
      }
  });
}