使用jQuery替换元素

$("font[size=3]").each(function () {
  // insert new container div after each `<font>`
  var $div = $("<div class='legend well'>").insertAfter(this);

  // remove the `<font>` and append its children to the new container
  $(this).remove().children().appendTo($div);
});

div.legend {
   color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<font size="3">
  <p>elements to keep</p>
</font>
<font size="3">
  <p>more elements to keep</p>
</font>