Vanilla HTML+JS - 动态插值？

Question

我知道在 Handlebars 等框架中。可以这样写 HTML：

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

在此人为设计的示例中，在此页面上加载的 JS 文件将 return 名为 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/>

Vanilla HTML+JS - 动态插值？

Vanilla HTML+JS - Dynamic Interpolation?

html

javascript

interpolation

templating-engine