需求：存在<sup>标签时将<span>标签替换为带类名的<sup>标签

这里有几种实用的方案来完成这个标签转换需求，根据你的项目技术栈选就行：

1. 原生JavaScript（无依赖，推荐） #

这种方法不需要任何第三方库，兼容性覆盖绝大多数现代浏览器：

// 选中所有直接包含带类名span的sup元素
const targetSups = document.querySelectorAll('sup > span[class]');

targetSups.forEach(sup => {
  const span = sup.firstElementChild;
  // 将span的类名转移到sup上
  sup.classList.add(...span.classList);
  // 用span的内容替换sup的内部（如果span有子元素，用innerHTML代替textContent）
  sup.textContent = span.textContent;
});

说明： #

• querySelectorAll('sup > span[class]') 精准匹配直接子元素是带class的span的sup，避免嵌套过深的情况
• 如果span内部不止纯文本（比如还有其他标签），把sup.textContent = span.textContent改成sup.innerHTML = span.innerHTML即可

2. jQuery方案（如果项目已引入jQuery） #

如果你的项目已经在用jQuery，代码会更简洁：

$('sup > span[class]').each(function() {
  const $span = $(this);
  const $sup = $span.parent();
  // 转移类名
  $sup.addClass($span.attr('class'));
  // 替换内容
  $sup.html($span.html());
});

注意事项： #

• 尽量避免用正则表达式直接处理HTML字符串，因为HTML结构可能有各种边界情况（比如空格、嵌套、特殊字符），DOM操作是更可靠的方式

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