如何使用sed命令批量替换HTML文本生成西班牙语多语言版本

我有一份英文版本的HTML文件index.html，需要新增对应的西班牙语版本，打算使用sed工具实现自动将文件中指定的英文文本替换为西班牙语后保存为新文件。

示例原HTML代码 #

<section class="p-b-10">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="heading-text heading-section">
<h2>THE COMPANY</h2>
<span class="lead">The most happiest eu, sodales vel dolor. </span>
</div>
</div>
<div class="col-lg-6 m-t-60">
<div class="p-progress-bar-container title-up small color">
<div class="p-progress-bar" data-percent="100" data-delay="100" data-type="%">
<div class="progress-title">One Sun   </div>
</div>
</div>
<div class="p-progress-bar-container title-up small color">
<div class="p-progress-bar" data-percent="94" data-delay="200" data-type="%">
<div class="progress-title">Two    </div>
</div>
</div>
<div class="p-progress-bar-container title-up small color">
<div class="p-progress-bar" data-percent="78" data-delay="300" data-type="%">
<div class="progress-title">JQUERY    </div>
</div>
</div>
<div class="p-progress-bar-container title-up small color">
<div class="p-progress-bar" data-percent="65" data-delay="400" data-type="%">
<div class="progress-title">Three | ok   </div>
</div>
</div>
<div class="p-progress-bar-container title-up small color">
<div class="p-progress-bar" data-percent="65" data-delay="400" data-type="%">
<div class="progress-title">Three    </div>
</div>
</div>
</div>
</div>
</div>
</section>

替换规则 #

• THE COMPANY 替换为 Empresa
• One Sun 替换为 Uno Sol
• Two 替换为 Dos
• Three | ok 替换为 Tres | ok

替换后预期效果 #

<section class="p-b-10">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="heading-text heading-section">
<h2>Empresa    </h2>
<span class="lead">The most happiest eu, sodales vel dolor.     
</span>
</div>
</div>
<div class="col-lg-6 m-t-60">
<div class="p-progress-bar-container title-up small color">
<div class="p-progress-bar" data-percent="100" data-type="%">
<div class="progress-title">Uno Sol       </div>
</div>
</div>
<div class="p-progress-bar-container title-up small color">
<div class="p-progress-bar" data-percent="94" data-type="%">
<div class="progress-title">Dos    </div>
</div>
</div>
<div class="p-progress-bar-container title-up small color">
<div class="p-progress-bar" data-percent="78" data-type="%">
<div class="progress-title">JQUERY    </div>
</div>
</div>
<div class="p-progress-bar-container title-up small color">
<div class="p-progress-bar" data-percent="65" data-type="%">
<div class="progress-title">Tres | ok       </div>
</div>
</div>
<div class="p-progress-bar-container title-up small color">
<div class="p-progress-bar" data-percent="65" data-type="%">
<div class="progress-title">Three    </div>
</div>
</div>
</div>
</div>
</div>
</section>

可行sed实现命令 #

直接执行以下命令即可完成替换，生成西班牙语版本文件index.es.html，不会修改原英文文件：

sed -e 's/THE COMPANY/Empresa/g' \
    -e 's/One Sun/Uno Sol/g' \
    -e 's/Two/Dos/g' \
    -e 's/Three | ok/Tres | ok/g' index.html > index.es.html

如果需要避免误替换页面其他位置的相同文本，可以增加上下文限定替换范围，示例如下：

# 仅替换<h2>标签内的THE COMPANY
sed -e 's/<h2>THE COMPANY<\/h2>/<h2>Empresa<\/h2>/g' \
    # 仅替换progress-title类容器内的文本
    -e 's/<div class="progress-title">One Sun/<div class="progress-title">Uno Sol/g' \
    -e 's/<div class="progress-title">Two/<div class="progress-title">Dos/g' \
    -e 's/<div class="progress-title">Three | ok/<div class="progress-title">Tres | ok/g' index.html > index.es.html

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