非标准属性如[class]="revealtel?'':'invisible'"不能用css选择器匹配，因其是框架注入的绑定语法，非标准html属性；应通过遍历attributes、正则提取标识符、映射为data-*属性并用mutationobserver同步变更。
非标准属性为什么不能用 CSS 选择器直接匹配
像 [class]="revealtel?'':'invisible'" 这类带方括号和表达式的属性，根本不是标准 HTML 属性，而是框架（如 Angular、Vue）编译时注入的绑定语法。浏览器解析器会把它当作一个名为 [class] 的普通属性名处理，但 CSS 选择器里的 [class] 指的是标准 class 属性，两者语义完全不重叠。
常见错误现象：写 document.querySelectorAll('[class="revealtel?\'\':\'invisible\'"]') 查不到任何元素，因为 DOM 中实际存在的属性名是字面量 [class]，不是 class；而值里还有单双引号嵌套、三元运算符，CSS 选择器根本不支持解析表达式。
- 不要试图用
querySelector直接匹配这类属性——它只认静态字符串，不执行 JS 表达式 - 真正要捕获的是“这个元素被框架标记为需响应某状态”，而不是“它的属性值等于某个字符串”
- 优先检查对应元素是否带有
data-前缀的运行时标记（如data-reveal-tel），这是更可靠的数据通道
用 getAttribute + 正则提取非标准属性值中的有效字段
既然不能靠选择器，就得手动遍历 + 解析。核心思路是：先用通配方式捞出所有含方括号的属性，再对值做轻量级表达式剥离，提取真实语义字段。
例如对 [class]="revealtel?'':'invisible'"，目标不是还原 JS 运行结果，而是识别出它关联的是 revealtel 这个开关字段。
- 用
element.attributes遍历所有属性，筛选出name.includes('[') && name.includes(']')的项 - 对匹配到的值（如
"revealtel?'':'invisible'"），用正则/[a-zA-Z_$][a-zA-Z0-9_$]*/提取第一个合法标识符（即revealtel） - 避免用
eval()或Function动态执行——既危险又不可控，且无法处理未定义变量 - 提取后统一转成
data-reveal-tel这样的标准data-属性，方便后续用querySelector('[data-reveal-tel]')管理
拦截非标准属性变更并同步更新 data-* 属性
框架会动态改写这些属性（比如 Vue 的响应式更新），所以不能只做一次扫描。必须监听 DOM 变化，把非标准属性的变更实时映射为标准 data- 属性。
注意：MutationObserver 不能监听属性值变化（除非显式配置 attributeFilter），但对 [class] 这种非常规名，浏览器不会触发标准 attribute change 事件——得靠 characterData 或 subtree + childList 组合兜底。
- 监听范围设为
{ attributes: true, subtree: true, childList: true }，并过滤出含'['的属性名 - 每次变更后，重新提取标识符，调用
element.setAttribute('data-' + key, value)同步（value 可设为''或'true'） - 避免高频重复设置：加个
WeakMap<element set>></element>缓存已处理的键，防止同一元素同一字段反复写 - 不要覆盖用户手写的
data-属性——先检查是否存在，存在则跳过，保证开发者控制权
结构化转换时保留原始上下文而非硬编码映射
不同框架对同一语义可能用不同非标准属性名：[class]、[ngClass]、:class、v-bind:class 都可能表达“条件显示”。硬编码每种写法会迅速失控。
真正关键的是字段语义（如“电话可见性”），不是语法形式。转换策略应围绕语义建模，而不是字符串匹配。
- 建立字段语义词典，例如
{ revealtel: 'phoneVisibility', showHeader: 'headerState' } - 提取到标识符后，查词典得到标准字段名，再生成对应的
data-phone-visibility - 输出结构统一用对象：{
element: el,field: 'phoneVisibility',value: true/false } - 容易被忽略的是：某些属性值可能是函数调用（如
[class]="getClassName()"），此时无法静态推断，应标记为dynamic类型，避免误判
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
