基于正则的批量替换标签名的基本思路
核心要点
在处理来自后端模板或前端生成的 HTML 字符串时，JavaScript 字符串操作需要关注对每个标签的诊断和替换。正则表达式是实现批量替换的核心工具，因为它能够捕获标签名并把它们映射到新的目标标签。
重要的一点是要实现对开标签和闭标签的一致替换，且尽量保留标签的属性和其他信息。通过回调函数，我们可以在替换时保持原有属性、空格和边界不变，并确保大小写处理为不敏感。以下示例展示了如何在不改变内容结构的前提下完成替换。
下面给出一个简要的代码片段，展示如何在不改变其他内容的前提下将指定标签名替换为目标标签。你可以把它作为基础，扩展到批量映射。
function replaceTagName(html, oldTag, newTag) {var oldLower = oldTag.toLowerCase();return html.replace(/<\s*(\/?)([a-zA-Z0-9]+)([^>]*?)>/g, function(m, slash, name, rest){if (name.toLowerCase() === oldLower) {return `<${slash}${newTag}${rest}>`;}return m;});
}
示例实现：单映射到目标标签的批量替换
完整实现与使用示例
如果要一次替换多组标签映射，可以将映射关系放在一个对象中，面对每一个发现的标签名先在映射中查找。批量映射允许你在同一轮替换中完成多项更名。
下面的实现示例演示如何接受一个映射对象，例如 {'div':'section', 'span':'em'}，并保持属性与原有文本的完整性。关键点在于回调函数中对 name 进行大小写不敏感的匹配，以及如何返回带有新标签名的字符串。
function batchRenameTagNames(html, tagMap) {// tagMap: { oldTag: newTag, ... } // keys are tag names, values are target namesvar lowerMap = {};for (var k in tagMap) {if (tagMap.hasOwnProperty(k)) {lowerMap[k.toLowerCase()] = tagMap[k];}}return html.replace(/<\s*(\/?)([a-zA-Z0-9]+)([^>]*?)>/g, function(m, slash, name, rest){var lower = name.toLowerCase();if (lowerMap.hasOwnProperty(lower)) {return `<${slash}${lowerMap[lower]}${rest}>`;}return m;});
}// 使用示例
var input = 'Text';
var output = batchRenameTagNames(input, { 'div':'section', 'span':'em' });
console.log(output); // Text
兼容性与边界处理：确保字符串中的其他文本不被误改
注意事项与对策
在处理真实世界的 HTML 字符串时，可能会遇到脚本、样式、模板语法等情况。正则替换可能会误改这些场景中的文本，尤其是在属性值中出现类似的标签名称时。因此，使用这类替换时，尽量限定在标签边界内的名字替换，并考虑是否需要对嵌套结构进行单独处理。
另外一个关键点是对未识别的标签保持原样，避免引入意外的 HTML 破坏。对于只有少量目标标签的场景，可以通过前置的标签集合过滤来提升鲁棒性。
// 小技巧：只对指定集合进行替换的版本
function safeBatchRename(html, map) {const allowed = Object.keys(map).map(k => k.toLowerCase());return html.replace(/<\s*(\/?)([a-zA-Z0-9]+)([^>]*?)>/g, function(m, slash, name, rest){const idx = allowed.indexOf(name.toLowerCase());if (idx !== -1) {const to = Object.keys(map)[idx];return `<${slash}${map[to]}${rest}>`;}return m;});
}
