替换HTML元素属性名需三步：先getAttribute读值，再setAttribute写新名，最后removeAttribute删旧名；须校验元素和旧属性存在性，避免null写入或重复属性；禁用于class/style/value等反射属性。
用 JavaScript 的 setAttribute 替换指定属性名
HTML 元素的属性名不能直接“重命名”，只能先读取旧属性值，再用新属性名写入，最后删掉旧属性。核心操作就是 getAttribute + setAttribute + removeAttribute 三步。
常见错误是只调 setAttribute 却没删旧属性，结果变成两个同值属性并存（比如既有 data-old="123" 又有 data-new="123"），后续逻辑容易误判。
- 必须确保目标元素存在，否则
getAttribute返回null，直接传给setAttribute可能导致字符串"null"被写入 - 若旧属性不存在，
getAttribute返回null，建议加空值判断，避免意外写入 - 对
class、style、value等反射属性，不要用这套流程——它们有专门的 DOM 属性（如element.className）或行为（如input.value不受setAttribute实时影响）
const el = document.querySelector('#my-btn');
const oldValue = el.getAttribute('data-legacy');
if (oldValue !== null) {
el.setAttribute('data-current', oldValue);
el.removeAttribute('data-legacy');
}
批量替换多个元素的同一属性名（含兼容性注意）
用 document.querySelectorAll 拿到节点列表后，得用 forEach 或传统 for 循环逐个处理。不能直接在 NodeList 上链式调用 setAttribute —— 它不是数组，没有这些方法。
IE11 及更早版本不支持 NodeList.prototype.forEach，如果还要兼容，得转成数组或用 for 循环。
-
querySelectorAll返回的是静态 NodeList，不用担心遍历时被 DOM 变动干扰 - 若替换的是
id或name这类可能影响表单提交或锚点跳转的属性，要确认页面其他逻辑是否依赖原值（比如 JS 里写了document.getElementById('old-id')） - 属性名大小写敏感：
data-Id和data-id是两个不同属性
document.querySelectorAll('[data-legacy]').forEach(el => {
const v = el.getAttribute('data-legacy');
if (v != null) {
el.setAttribute('data-v2', v);
el.removeAttribute('data-legacy');
}
});
用正则 + outerHTML 替换（仅限字符串级粗粒度操作）
这不是推荐做法，但当你面对的是整个 HTML 字符串（比如从接口拿到的片段、模板字符串、或服务端渲染输出），又不想走 DOM 解析，可以用正则匹配属性并替换。它快但脆弱：属性顺序、引号类型（单/双/无）、空格、换行都会让正则失效。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
典型翻车场景：正则把 data-legacy is a string 在响应式框架中，属性由数据驱动。你手动用 比如 Vue 模板里写了
实际替换属性名这事，表面是字符串或 DOM 操作，背后牵扯的是数据流向、框架生命周期和浏览器解析规则。最容易被忽略的，是那个“旧属性删干净了没”——多一个残留属性，可能让某个隐藏的 CSS 选择器或 JS 查询意外命中。data-legacy 换掉了，但漏掉了 （单引号），或者误伤了
.*?），否则跨标签匹配会炸开"、' 和无引号情况，正则会变得极难维护htmlString.replace(/data-legacy=(["'])(.*?)\1/g, 'data-new=$1$2$1');
Vue / React 等框架里别硬改属性名
setAttribute 改了 DOM 属性，下一次 re-render 会被框架覆盖。真要换属性名，得同步改数据源和模板里的绑定表达式。:data-new="val" 并更新 props 定义。
disabled prop 会映射为 disabled attribute，但 customProp 默认不会自动映射data-* 属性没问题，但自定义属性名需驼峰转短横线（dataMyAttr → data-my-attr），且必须确保是合法的 HTML5 自定义属性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
