Modifying attributes and texts that follow simple patterns-CodePudding

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 onl oad="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.

CodePudding user response：

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>

CodePudding user response：

I haven't really tried parsing before, but a little googling I found XMLSerializer that can serialize html, which makes it easy to replace all occurrences with regex (not that well versed with regex either).

Maybe it is not the greatest way to do it, as the body is replaced by a new deserialized and parsed version, but it seemingly gets the job done and hopefully you can adjust to fit into your project?

function main() {
  const XMLS = new XMLSerializer();
  let bodyContent = XMLS.serializeToString(document.body);
  bodyContent = bodyContent.replace(/\[\[.*?\]\]/g, "");
  bodyContent = bodyContent.replace(/\{\{/g, `<span style="color: red; font-weight: bold;">`);
  bodyContent = bodyContent.replace(/\}\}/g, "</span>");
  document.body.outerHTML = bodyContent;
}

<body onl oad="main()">

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

</body>

CodePudding user response：

What about something like this?

<!DOCTYPE html>
<html>
    
<head>
    <script>  
function main() {
    for (let i = 0; i < document.body.childNodes.length; i  ) {
      alert( document.body.childNodes[i].string );

//get the p element by id
const simple_p = document.getElementById('simple-p')
//change class attribute to blank
simple_p.setAttribute('class','')
//create the span
const simple_span = document.createElement('span')
//change the span style
simple_span.setAttribute('style','color: red;; font-weight: bold;')
//text of the span
simple_span.innerHTML = 'var-templ-2'
//part of the p element text
simple_p.innerHTML = 'Some text '
//append the span element to the p element
simple_p.appendChild(simple_span)
//next part of the p element text
simple_p.innerHTML  = '.'

 // Text, DIV, Text, UL, ..., SCRIPT
    }              
}
    </script>
</head>

    
<body onl oad="main()">

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

</body>
    
</html>