如何使用Javascript移除段落中带.show-mark类的<mark>标签并保留文本内容

浏览器端DOM操作方案（推荐，适合前端页面直接处理） #

该方案直接操作DOM节点，不会破坏其他元素的事件绑定，性能稳定，兼容性强。

实现代码 #

// 筛选所有带.show-mark类的mark元素
const targetMarks = document.querySelectorAll('mark.show-mark');

// 倒序遍历避免DOM动态变化导致的索引异常
for (let i = targetMarks.length - 1; i >= 0; i--) {
  const currentMark = targetMarks[i];
  // 把mark内部的所有子节点依次移动到mark标签之前
  while (currentMark.firstChild) {
    currentMark.parentNode.insertBefore(currentMark.firstChild, currentMark);
  }
  // 删除已经空了的mark标签
  currentMark.remove();
}

方案优势 #

• 完整保留mark标签内的所有内容，包括纯文本、嵌套的其他内联元素
• 仅修改目标节点，不会影响父元素内其他节点的状态，其他元素绑定的事件不会丢失
• 不需要重新解析整个父元素的HTML，性能高于innerHTML全量替换方案
• 兼容所有现代浏览器及IE11

服务端HTML字符串处理方案 #

如果你是在Node.js环境中直接处理HTML源码字符串，可以使用cheerio库实现同等逻辑：

const cheerio = require('cheerio');
// 加载待处理的HTML字符串
const $ = cheerio.load(rawHtmlStr);
// 替换所有目标mark标签为其内部内容
$('mark.show-mark').each(function() {
  $(this).replaceWith($(this).contents());
});
// 获取处理后的HTML字符串
const resultHtml = $.html();

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