WebStorm中如何批量重命名HTML属性？

嘿，这个问题我太熟了——IDE的「Refactor | Rename」本来就是给代码标识符（比如变量名、函数名）用的，对HTML属性的批量替换确实不灵光。给你几个实用的解决方案，挑适合你的来：

几乎所有主流编辑器（VS Code、Sublime Text、WebStorm等）都支持正则查找替换，这是最省心的方法：

1. 打开编辑器的查找替换面板（VS Code是Ctrl+H，Windows/Linux；Cmd+H，Mac）
2. 勾选「正则表达式」选项（VS Code里是面板上的.*图标）
3. 查找内容输入：

   <img([^>]*)\ssrc="([^"]+)"
   

4. 替换内容输入：

   <img$1 data-original="$2"
   

5. 点击「全部替换」即可。

这个正则会匹配所有带src属性的<img>标签，把src替换成data-original，同时保留标签里的其他属性（比如alt、class）。

如果你有大量HTML文件要处理，手动替换太麻烦，可以写个简单的Node.js脚本批量操作：

const fs = require('fs');
const path = require('path');

// 处理单个HTML文件
function processHTMLFile(filePath) {
  fs.readFile(filePath, 'utf8', (err, data) => {
    if (err) throw err;
    // 正则替换src为data-original
    const updatedContent = data.replace(/<img([^>]*)\ssrc="([^"]+)"/g, '<img$1 data-original="$2"');
    fs.writeFile(filePath, updatedContent, 'utf8', (err) => {
      if (err) throw err;
      console.log(`✅ 处理完成：${filePath}`);
    });
  });
}

// 遍历指定目录下的所有HTML文件
function traverseDir(dir) {
  fs.readdir(dir, (err, files) => {
    if (err) throw err;
    files.forEach(file => {
      const fullPath = path.join(dir, file);
      fs.stat(fullPath, (err, stats) => {
        if (err) throw err;
        if (stats.isDirectory()) {
          traverseDir(fullPath); // 递归处理子目录
        } else if (path.extname(file) === '.html') {
          processHTMLFile(fullPath);
        }
      });
    });
  });
}

// 替换成你的HTML文件所在目录，比如'./src/views'
traverseDir('./html-files');

使用步骤：

1. 把代码保存为lazyload-transform.js
2. 先备份你的HTML文件（重要！）
3. 在终端运行node lazyload-transform.js即可批量处理。

如果没法直接修改HTML源文件（比如静态页面托管在第三方平台），可以在页面加载时用JS动态替换属性：

document.addEventListener('DOMContentLoaded', () => {
  // 选中所有带src属性的img标签
  const imgs = document.querySelectorAll('img[src]');
  
  imgs.forEach(img => {
    // 把src的值转移到data-original
    img.setAttribute('data-original', img.getAttribute('src'));
    // 把src换成1x1的透明占位图，避免提前加载原图
    img.setAttribute('src', 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==');
  });
});

之后你只需要引入懒加载库（比如常见的lazyload.js），它会自动识别data-original属性实现懒加载。

如果你的项目用了Webpack、Vite这类构建工具，可以配置插件/loader在构建阶段自动替换，不用手动改源文件：

示例：Vite插件 #

在vite.config.js里添加自定义插件：

export default {
  plugins: [
    {
      name: 'img-lazyload-transform',
      transformIndexHtml(html) {
        // 正则替换src为data-original
        return html.replace(/<img([^>]*)\ssrc="([^"]+)"/g, '<img$1 data-original="$2"');
      }
    }
  ]
}

示例：Webpack #

可以用html-loader的attributes配置，或者写个自定义loader处理HTML内容，核心逻辑也是用正则替换。

内容的提问来源于stack exchange，提问作者J. C