如何用grep&sed遍历JSON并批量替换多个HTML文件中的引用值

刚好我之前处理过类似的需求，用shell脚本结合grep和sed就能完美解决你的问题，具体步骤和代码如下：

核心思路 #

先从reference.json里提取出「旧JS文件名→新JS文件名」的映射规则，然后循环遍历所有目标HTML文件，用sed完成批量替换。

具体脚本 #

直接运行下面的shell命令即可（如果是Mac系统，注意sed的-i参数需要调整，我会在后面说明）：

# 从reference.json提取替换规则并格式化
grep -o '"[^"]*":"[^"]*"' reference.json | sed 's/"\([^"]*\)":"\([^"]*\)"/\1=\2/' | while IFS='=' read -r old_js new_js; do
    # 对所有HTML文件执行替换操作
    sed -i "s/src=\"$old_js\"/src=\"$new_js\"/g" *.html
done

代码逐行解释 #

• 提取JSON键值对：grep -o '"[^"]*":"[^"]*"' reference.json
  这个命令会把JSON里的每一组键值对单独抽出来，比如输出结果是"a.js": "first.1a.js"、"b.js": "second.2b.js"这样的行。

• 格式化替换规则：sed 's/"\([^"]*\)":"\([^"]*\)"/\1=\2/'
  把上一步的结果转换成a.js=first.1a.js的格式，方便后续用read命令拆分旧文件名和新文件名。

• 循环执行替换：while IFS='=' read -r old_js new_js; do ... done
  遍历每一条替换规则，把旧文件名存在old_js变量，新文件名存在new_js变量里。

• sed批量替换：sed -i "s/src=\"$old_js\"/src=\"$new_js\"/g" *.html
  在所有.html文件中，把所有匹配src="old.js"的内容替换成src="new.js"。-i参数表示直接修改文件内容（不用生成临时文件）。

注意事项（针对Mac系统） #

Mac自带的sed和GNU sed语法略有不同，如果你用的是Mac，需要把sed的-i参数改成-i ''，否则会报错。修改后的命令如下：

grep -o '"[^"]*":"[^"]*"' reference.json | sed 's/"\([^"]*\)":"\([^"]*\)"/\1=\2/' | while IFS='=' read -r old_js new_js; do
    sed -i '' "s/src=\"$old_js\"/src=\"$new_js\"/g" *.html
done

自定义调整 #

如果你只想处理特定的HTML文件（比如只处理test1.html、test2.html），把命令里的*.html换成具体的文件名列表即可，比如：

sed -i "s/src=\"$old_js\"/src=\"$new_js\"/g" test1.html test2.html test3.html

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