如何批量修改HTML中多个同结构区块的元素位置？

方案1：编辑器正则批量替换（无需写代码，1分钟搞定） #

绝大多数主流代码编辑器（VS Code、Sublime Text、Notepad++等）都支持多行正则查找替换，操作步骤如下：

1. 打开HTML文件，按下Ctrl+H（Mac为Command+H）调出替换面板，开启正则匹配（VS Code直接点替换框左侧的.*按钮即可）
2. 查找内容填：

(<div class="thumbnail">[\s\S]*?)(<h5 class="doctype"[\s\S]*?<div class="price_time">[\s\S]*?)(<p[^>]+id="price"[^>]*>[\s\S]*?<\/p>)([\s\S]*?<\/div>\s*<!--Thumbnail)

3. 替换内容填：

$1$3$2$4

4. 先点击「替换单个」测试1-2个盒子确认效果正确，再点击「全部替换」一次性处理所有盒子

注意：操作前务必备份原文件，避免匹配规则和你的实际结构有出入导致内容丢失

方案2：Node.js脚本批量处理（100%准确率，无匹配误差） #

如果担心正则匹配出错，用DOM处理工具操作更稳妥，步骤如下：

1. 新建空文件夹，把你的HTML文件放进去，文件夹内打开终端执行命令安装依赖：

npm i cheerio

2. 新建process.js文件，写入以下代码：

const fs = require('fs')
const cheerio = require('cheerio')

// 替换成你自己的文件路径
const originHtml = fs.readFileSync('./原文件.html', 'utf8')
const $ = cheerio.load(originHtml, { decodeEntities: false })

// 遍历所有信息盒子
$('.thumbnail').each(function() {
  // 提取价格元素
  const priceNode = $(this).find('.price_time p#price').clone()
  // 移除原位置的价格元素
  $(this).find('.price_time p#price').remove()
  // 插入到doctype标签上方
  $(this).find('h5.doctype').before(priceNode)
})

// 输出处理后的文件
fs.writeFileSync('./处理后.html', $.html(), 'utf8')

3. 终端执行node process.js，即可在文件夹内得到处理完成的HTML文件

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