jquery - 積み重ねられたDOM要素を統合する

Question

contenteditable divでフォーマットされたHTMLがあります。私はより簡潔で現代的なHTMLにしたいと思っています。私は簡単にb、strong、em、fontなどのタグを置き換えてスパンで置き換えることができますが、その結果、スタックされた要素が生成されました。例えば

、私が持っているかもしれません：

<span style="font-weight:bold"> 
    <span style="text-decoration:underline">some text</span> 
</span> 

を私は見てみたい：

<span style="font-weight:bold; text-decoration:underline">some text</span> 

難しい部分が処理する必要があります：

<span style="font-weight:bold"> 
    <span style="text-decoration:underline">some text</span> not underlined 
</span> 

私は」これについて何か探して考えていたのですが、合理的なものは見つかりませんでした。

Answer 1

さて、これが始まりです。明らかに、セレクタはspanよりも具体的になります。

$("span").each(function(){ 
    var $this = $(this); 
    var $contents = $(this).contents(); 

    if($contents.length === 1 && $contents.is("span")){ 
     // only one child (including text nodes) and it is a span, combine 
     copyStylesFromParentToChild(); // need to implement this 

     $this.replaceWith($this.children()); // replace the parent with the child 
    } 
}); 

ここで厄介な部分はcopyStylesFromParentToChildです。 1つの要素から別の要素にすべてのスタイルをコピーする簡単な方法はわかりません。試してみることができますJavaScript & copy style