Javascript designMode <font>タグを削除しますか？

Question

私は楽しいためにWYSIWYGエディタを作っています。私はdesignmodeでiframeを使用していて、javascriptのexeccommand機能を使用してWYSIWYGエディタを作成しています。私は、WYSIWYGエディタでテキストにフォントサイズを適用するには、次のコードを使用します。

richTextField.document.execCommand('fontSize',false,slctdValue); 

これは、これにインラインフレームの内容に変更：

<div><font size="4" color="red">This is a test!</font></div> 

私は、フォントタグを使用して好きではないが、私はむしろ、希望

<div style="font-size:22px;color:red;">This is a test!</div> 

最初の例に似たコードを見つけて2番目の例に置き換える方法はありますか？

Answer 1

$(document).ready(function(){ 
 
    $('div').css({'font-size':'100%'}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="font-size:22px;color:red;">This is a test!</div>

Answer 2

ここで働いてjsfiddleへのリンクです：

https://jsfiddle.net/jonolayton/0851d2uk/4/

このコードは、すべての "フォント" のタグを見つけ、要求されたような等価 "DIV" に置き換えます。

は、ここに私がやったことだ：

HTML：

<div> 
    <font size="4" color="red">This is a test!</font> 
    <font size="4" color="green">This is a test!</font> 
    <font size="4" color="blue">This is a test!</font> 
    <font size="4" color="pink">This is a test!</font> 
    <font size="4" color="yellow">This is a test!</font> 
    <font size="4" color="brown">This is a test!</font> 
</div> 

Javascriptを：

$(document).ready(function() { 
    $('font').each(function() { 
     var size = $(this).attr('size'); 
     var color = $(this).attr('color'); 
     var text = $(this).text(); 

     $('<div></div>').insertAfter($(this)).css({ 
      'font-size' : '22px', 
      'color' : color 
     }).text(text); 
     $(this).remove(); 
    }); 
});