Sed - find and replace text in html code (from one language to another)-CodePudding

I have html file index.html with english version. I want to create one more language version. I think the best way to do this is use sed. So I want to automatically change language version to another and save it in new file using sed.

For example my index:

    <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>

Sed shoud find and replace all given english words to spanish inside my whole code.

The Company (replace to) Empresa

One Sun (replace to) Uno Sol

Two (replace to) Dos

Three | ok (replace to) Tres | ok

so should looks like below:

    <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>

Please help! Thank You

CodePudding user response：

You can use sed like this: s/FIND/REPLACE/g If you want to run multiple sed commands use ; operator:

sed 's/The Company/Empresa/g; s/One Sun/Uno Sol/g; s/Two/Dos/g; s/Three | ok/Tres | ok/g' $YOUR_FILE > spanish.html

If you don't want to replace all the words and only the first match, remove the 'g'.

CodePudding user response：

You can try this sed based on the example data provided.

sed -Ee '/h2/{s/(.*>).*(<.*)/\1Empresa\2/}' \
-e '/div class="progress-title"/{s/(.*>.?*)One Sun(.?*<.*)/\1Uno Sol\2/}' \
-e '/div class="progress-title"/{s/(.*>.?*)Two(.?*<.*)/\1Dos\2/}' \
-e '/div class="progress-title"/{s/(.*>.?*)Three \| ok(.?*<.*)/\1Tres | ok\2/};' input_file

This will try and match the tag before matching the content while taking into account the fact that there may be further data within the tags while only targeting the words to be changed.

Or as a one liner

sed -E '/h2/{s/(.*>).*(<.*)/\1Empresa\2/};/div class="progress-title"/{s/(.*>.?*)One Sun(.?*<.*)/\1Uno Sol\2/}; /div class="progress-title"/{s/(.*>.?*)Two(.?*<.*)/\1Dos\2/};/div class="progress-title"/{s/(.*>.?*)Three \| ok(.?*<.*)/\1Tres | ok\2/};' input_file

Output

<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-delay="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-delay="200" 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-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">Tres | 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>