Modifying attributes and texts that follow simple patterns

Here is my initial unuseful code.

<!DOCTYPE html>
<html>
    
<head>
    <script>  
function main() {
    for (let i = 0; i < document.body.childNodes.length; i++) {
      alert( document.body.childNodes[i].string ); // Text, DIV, Text, UL, ..., SCRIPT
    }              
}
    </script>
</head>

    
<body onload="main()">

<p class='[[param-tmpl-1]]'>
    Some text {{var-templ-2}}.
</p>

</body>
    
</html>

I would like that the browser works with the following code for the body where [[ ... ]] has been cut, and {{ SOMETHING }} is become <span style = "color: red;; font-weight: bold;">SOMETHING</span>.

<body>
    <p class=''>
        Some text <span style = "color: red;; font-weight: bold;">var-templ-2</span>.
    </p>
</body>

I have no control on the DOM structure, and the places where [[ ... ]] and {{ ... }} are used.

Answer

You can also do it by modifying document.body.outerHTML directly:

window.onload=_=>
  document.body.outerHTML=document.body.outerHTML
    .replace(/[[.*?]]/g, "")
    .replace(/{{(.*?)}}/g, `<span style="color: red; font-weight: bold;">$1</span>`);

<body>
  <p class='[[param-tmpl-1]]'>
    Some text {{var-templ-2}}.
  </p>
  <p class='[[ ... ]]'>
    Some other and {{more}} text of {{ SOMETHING }}.
  </p>
</body>

Advertisement

Answer