如何替换包含链接的H3标签为SPAN并保留内部链接及HTML内容？

问题原因 #

原有代码使用$(this).text()仅提取了H3标签内的纯文本内容，自动丢弃了内部嵌套的<a>等HTML标签，所以链接会消失。

修复方案 #

把text()方法换成html()方法即可完整保留标签内部的所有HTML结构：

$(".blog-sidebar h3.entry-title").replaceWith(function () {
     return "<span class='sidebar-post-title'>" + $(this).html() + "</span>";
});

可选优化方案（更安全的节点操作方式） #

如果担心直接拼接HTML可能出现的意外问题，可以用jQuery的原生节点操作方法实现标签替换，逻辑更稳妥：

$(".blog-sidebar h3.entry-title").each(function() {
  // 取出H3的全部内部节点，移除外层H3标签，再在外层包上目标span标签
  $(this).contents().unwrap().wrapAll("<span class='sidebar-post-title'></span>");
});

两种方案都可以实现替换H3为span、同时完整保留内部链接及所有HTML结构的需求，适配你给出的侧边栏DOM结构。

内容的提问来源于stack exchange，提问作者dtotheg