這是我最初的無用代碼。
<!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>
我希望瀏覽器使用以下代碼來處理[[ ... ]]被剪切的身體，并{{ SOMETHING }}變成<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>
我無法控制 DOM 結構，以及使用[[ ... ]]和{{ ... }}使用的地方。
uj5u.com熱心網友回復：
也可以document.body.outerHTML直接修改：
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>uj5u.com熱心網友回復：
我之前沒有真正嘗試過決議，但是通過谷歌搜索我發現了可以序列化 html 的XMLSerializer，這使得用正則運算式替換所有出現的事件變得很容易（也不太熟悉正則運算式）。
也許這不是最好的方法，因為 body 被新的反序列化和決議版本取代，但它似乎完成了作業，希望你可以調整以適應你的專案？
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 onload="main()">
<p class='[[param-tmpl-1]]'>
Some text {{var-templ-2}}.
</p>
<p class='[[ ... ]]'>
Some other text {{ SOMETHING }}.
</p>
</body>uj5u.com熱心網友回復：
這樣的事情呢？
<!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 onload="main()">
<p class='[[param-tmpl-1]]'>
Some text {{var-templ-2}}.
</p>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/528311.html