香草HTML+JS - 动态插值?

Question

我知道在像Handlebars等框架中，可以编写类似于以下内容的HTML：

<span id="logged-on-username">{{username}}</span>

在这个人为的示例中，在此页面上加载的 JS 文件将返回名为 username 的变量的值，并将其插入到视图模板中。

在原版HTML + JS中是否有类似的可能性？

提前感谢碰巧回答的任何人的时间。

Answer 1

你的意思是这样的

const content = {
"username": "Fredy Kruger",
"status": "Scary",
}
window.addEventListener("load", function() {
[...document.querySelectorAll("span.dynamic")].forEach(span => {
const match = span.textContent.match(/{{(.*?)}}/)
if (match.length === 2) span.innerText = content[match[1]]
})
})

Name: <span class="dynamic" id="logged-on-username">{{username}}</span><br/> 
Status: <span class="dynamic">{{status}}</span><br/>