如何将输出HTML标记<b> </b>更改为<strong> </strong>？

Question

如何将带有<b></b>标记的<strong></strong>代码替换为特定的div？

前：

<div id="aaa">hello<b>wow</b>!</div>

使用javascript替换为

<div id="aaa">hello<strong>wow</strong>!</div>

请帮忙！提前谢谢。

*****为什么我要尝试将输出HTML代码<b></b>更改为<strong></strong>，以便获得W3C验证。我能这样做吗？ **

或者是否有任何解决方案可以使用ASP.NET + C＃来做到这一点？

Answer 1

你走了：

var root, elems;

root = document.getElementById( 'test' );
elems = root.getElementsByTagName( 'b' );

toArray( elems ).forEach( function ( elem ) {
    var newElem = document.createElement( 'strong' );
    newElem.textContent = elem.textContent;
    elem.parentNode.replaceChild( newElem, elem );    
});

其中toArray是您首选的阵列转换器函数。我用这个：

function toArray( arrayLike ) { return [].slice.call( arrayLike ); }

现场演示： http://jsfiddle.net/mJSyH/3/

注意：此代码在IE8中不起作用。

Answer 2

您可以获取某个元素下的所有<b>元素，将所有子节点移动到新的<strong>元素，然后将<b>替换为<strong>。< / p>

<div id="aaa">hello<b>wow</b><b>2</b><b>3</b>!</div>

<script>
  var container = document.getElementById("aaa")
  var find = container.getElementsByTagName("b");
  var bold, strong;

  while (bold = find[0]) {
    strong = document.createElement("strong");

    while (bold.firstChild) {
      strong.appendChild(bold.firstChild);
    }

    bold.parentNode.replaceChild(strong, bold);
  }
</script>

您每次都可以设置bold = find[0]的原因是，当<b>元素从文档中删除时，它们也会从NodeList find中删除。

请参阅http://jsbin.com/eqikaj/13/edit的最新版本。

Answer 3

使用jQuery，您可以在父b容器元素的范围内找到所有div标记，然后用strong替换每个标记并复制源标记的内部文本：

$('#aaa b').each(function() {
  $(this).replaceWith($('<strong>' + this.html() + '</strong>');
});

Answer 4

如果你使用jQuery，你可以这样：

$('b').replaceWith(function() {
        return $('<strong>').html($(this).html());
});

只需以某种方式下载或包含jQuery库，您就可以使用该代码段。 http://docs.jquery.com/Downloading_jQuery

Answer 5

使用正则表达式的解决方案：

var e = document.getElementById("aaa");
e.innerHTML = e.innerHTML.replace(/<b[^>]*>(.*?)<\/b>/ig, '<strong>$1</strong>');

或许并不比上面的版本更快。 但是性能差异非常小（与实际应用无关）。 使用您认为最合适的

注意：您不需要使用toArray函数，您可以这样做：

Array.forEach(elems, function() {  ... })