如何用JavaScript将特定class的span标签替换为对应格式标签？

需求说明 #

• 把带bold类的<span>替换成<b>标签
• 把带italic类的<span>替换成<i>标签
• 把带underline类的<span>替换成<u>标签

输入HTML #

<span class="bold">Themes </span>and styles also help to keep your document <span class="italic">coordinated</span>. When you click Design and choose a new Theme, the pictures, <span class="underline">charts </span>and SmartArt graphics change to match your new theme. When you apply styles, your headings change to match the new theme

期望输出HTML #

<b>Themes </b>and styles also help to keep your document <i>coordinated</i>. When you click Design and choose a new Theme, the pictures, <u>charts </u>and SmartArt graphics change to match your new theme. When you apply styles, your headings change to match the new theme

你写的问题代码 #

const getEditorField = document.getElementById('editorField').innerHTML;
if (getEditorField.match(/\bbold\b/)) {
    getEditorField = getEditorField.replace(/<\/?span[^>]*>/gi, '<b>');
    } else if (getEditorField.match(/\bitalic\b/)) {
        getEditorField = getEditorField.replace(/(?<=<(?:\/)?)(?:span)(?:.*?)(?<!>)/gi, 'i');
    } else if (getEditorField.match(/\bunderline\b/)) {
        getEditorField = getEditorField.replace(/(?<=<(?:\/)?)(?:span)(?:.*?)(?<!>)/gi, 'u');
    }

问题出在哪 #

1. 变量赋值错误：用const声明的getEditorField是只读变量，后续尝试重新赋值会直接抛出错误。
2. 逻辑分支互斥：else if的逻辑只会执行第一个满足条件的分支，无法同时处理存在多种类的情况（比如输入里同时有bold、italic、underline）。
3. 正则匹配不准确：
   • 第一个正则会把所有span标签（不管类名）都替换成<b>，完全没筛选bold类。
   • 后面的正则写法有缺陷，无法精准匹配带对应类的span，替换逻辑也不能正确生成开标签和闭标签。

修复方案 #

方案一：直接操作DOM（更可靠） #

遍历目标span元素，根据类名替换成对应标签，避免正则操作HTML字符串的各种问题：

// 获取所有需要替换的span元素
const targetSpans = document.querySelectorAll('#editorField span.bold, #editorField span.italic, #editorField span.underline');

targetSpans.forEach(span => {
  let newElement;
  // 根据类名创建对应新标签
  if (span.classList.contains('bold')) {
    newElement = document.createElement('b');
  } else if (span.classList.contains('italic')) {
    newElement = document.createElement('i');
  } else if (span.classList.contains('underline')) {
    newElement = document.createElement('u');
  }
  // 把原span的内容移到新标签里
  newElement.innerHTML = span.innerHTML;
  // 用新标签替换原span
  span.parentNode.replaceChild(newElement, span);
});

方案二：修正正则操作HTML字符串 #

如果必须操作HTML字符串，调整正则和逻辑：

// 用let声明变量，允许后续修改
let editorHtml = document.getElementById('editorField').innerHTML;

// 分别替换每个类对应的span，不用else if，确保所有替换都执行
editorHtml = editorHtml.replace(/<span class="bold">(.*?)<\/span>/gi, '<b>$1</b>');
editorHtml = editorHtml.replace(/<span class="italic">(.*?)<\/span>/gi, '<i>$1</i>');
editorHtml = editorHtml.replace(/<span class="underline">(.*?)<\/span>/gi, '<u>$1</u>');

// 把修改后的HTML放回元素
document.getElementById('editorField').innerHTML = editorHtml;

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