Javascript 香草HTML+；动态插值？

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

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

{{username}

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

在香草HTML+JS中是否有类似的功能

---

提前感谢有时间回答的人。

你是说这样的话吗

const content={
“用户名”：“Fredy Kruger”，
“状态”：“可怕”，
}
addEventListener（“加载”，函数（）{
[…document.queryselectoral（“span.dynamic”）].forEach（span=>{
const match=span.textContent.match（/{{（.*？}}}/）
如果（match.length==2）span.innerText=content[match[1]]
})
})

Name:{{username}}

状态：{{Status}}

是的，JS用于操作DOM，以使用新内容更新页面。例如：

document.querySelector（“#登录用户名”）.textContent=“MyUserName”@slappy我猜他是想通过模板引擎方法注入变量，正如他在问题中所显示的那样。@Kerematam：哦，你是说他想把花括号作为目标？@slappy你的代码太完美了。我对它进行了测试，它满足了我的需要，我将在接受答案中给出的代码之外使用它。很高兴它有所帮助。祝你好运！非常感谢你。我选择这个作为答案，因为它完美地回答了我的问题。这也向我展示了可以用来创建自己的模板引擎的逻辑，它满足了我的需求。我还要感谢@slappy对原始帖子的评论。他的代码也非常有用，可以使用。让通配符匹配非贪婪的
{{{.*}}}
可能是一个好主意，只是为了防止文本节点中有多个匹配项，比如
{username}{{score}
@slappy，但这也不起作用，因为我的代码每个元素只处理一个var