如何用jQuery替换HTML？移除第二个li内span标签的问题排查

你现在的需求是移除面包屑列表第二个<li>里的<span>标签，同时保留span里的文本内容，但你当前的实现方式存在不少问题，咱们一步步拆解：

现有代码的问题 #

• 正则匹配过于僵硬：你写的正则完全绑定了<span style="font-size:10px">(two)</span>这个精确字符串，只要后端输出时style属性有一点变动（比如多了空格、改用单引号），或者文本内容变化，这个正则就直接失效了，容错性极低。
• 全量替换HTML的副作用：直接调用.html(replaced)会把整个.breadcrumbs-wrapper下的DOM结构重新渲染一遍，如果这些列表项上绑定了点击事件、hover效果之类的交互逻辑，都会被彻底清除，还会造成不必要的性能浪费。
• 代码复用性差：如果以后要处理其他li里的类似span，你得重新写新的正则，没法快速复用。

推荐的jQuery解决方案 #

我们应该直接针对目标DOM元素进行精准操作，而不是粗暴地替换整个HTML字符串：

方法一：用replaceWith替换span为其文本内容 #

// 定位到第二个li（索引从0开始，所以eq(1)）里的span，替换成自身文本
$(".breadcrumbs-wrapper li:eq(1) span").replaceWith(function() {
  return $(this).text();
});

方法二：用unwrap移除span标签（适合span内只有文本的场景） #

如果span里面没有嵌套其他DOM元素，只是纯文本，还可以用更简洁的unwrap方法，它会移除span这个父元素，把内部内容留在原位置：

$(".breadcrumbs-wrapper li:eq(1) span").contents().unwrap();

这两种写法的优势：

• 健壮性强：基于DOM元素定位，不管span的样式属性怎么变化，只要位置正确就能生效。
• 无额外副作用：只会修改目标span元素，不会影响其他元素的事件绑定和DOM状态。
• 扩展性好：如果要移除所有li里的这类span，只需要去掉:eq(1)的限制即可。

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