Here is my initial unuseful code.
JavaScript
x
24
24
1
<!DOCTYPE html>2
<html>3
4
<head>5
<script> 6
function main() {7
for (let i = 0; i < document.body.childNodes.length; i++) {8
alert( document.body.childNodes[i].string ); // Text, DIV, Text, UL, ..., SCRIPT9
} 10
}11
</script>12
</head>13
14
15
<body onload="main()">16
17
<p class='[[param-tmpl-1]]'>18
Some text {{var-templ-2}}.19
</p>20
21
</body>22
23
</html>24
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>.
JavaScript
1
6
1
<body>2
<p class=''>3
Some text <span style = "color: red;; font-weight: bold;">var-templ-2</span>.4
</p>5
</body> 6
I have no control on the DOM structure, and the places where [[ ... ]] and {{ ... }} are used.
Advertisement
Answer
You can also do it by modifying document.body.outerHTML directly:
JavaScript
1
4
1
window.onload=_=>2
document.body.outerHTML=document.body.outerHTML3
.replace(/[[.*?]]/g, "")4
.replace(/{{(.*?)}}/g, `<span style="color: red; font-weight: bold;">$1</span>`);JavaScript
1
8
1
<body>2
<p class='[[param-tmpl-1]]'>3
Some text {{var-templ-2}}.4
</p>5
<p class='[[ ... ]]'>6
Some other and {{more}} text of {{ SOMETHING }}.7
</p>8
</body>