如何开发Bookmarklet替换指定前缀name输入框的value值？

嘿，我完全懂你遇到的麻烦——直接替换document.body.innerHTML确实是个大坑，它会把整个页面的DOM重新渲染一遍，不仅会丢失所有绑定的事件监听，还可能搞乱表单状态、组件实例这些，绝对不是处理DOM元素的正确姿势。

咱们换个思路，用DOM元素直接操作的方式来实现，既安全又高效：

核心思路：用CSS属性前缀选择器精准定位输入框 #

CSS里的[name^="前缀"]选择器可以完美匹配name属性以指定字符串开头的元素，配合document.querySelectorAll就能轻松选中目标输入框，然后直接修改它们的value属性就行。

完整的书签小工具代码 #

javascript:(function(){
  // 匹配name以ABC_开头的Class1输入框，设置值为X
  document.querySelectorAll('input.Class1[name^="ABC_"]').forEach(input => {
    input.value = 'X';
  });
  // 匹配name以DEF_开头的Class1输入框，设置值为Y
  document.querySelectorAll('input.Class1[name^="DEF_"]').forEach(input => {
    input.value = 'Y';
  });
})();

为什么这个方法更好？ #

• 直接操作DOM元素本身，不会重新渲染整个页面，完全保留原有的事件、状态和页面结构
• 选择器精准，只会选中你需要修改的输入框，不会误操作其他元素
• 代码逻辑清晰，比正则替换HTML字符串可读性高太多

之前方法的问题分析 #

你之前用innerHTML.replace()的方式，本质是把整个页面的HTML字符串重新替换后再解析，这会导致：

• 所有之前绑定的JavaScript事件（比如按钮点击、输入框监听）全部丢失
• 表单里用户已经输入的内容、组件的状态都会被重置
• 一些动态生成的DOM元素可能会被破坏

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