javascript - 原版 HTML+JS - 动态插值?
问题描述
我知道在 Handlebars 等框架中。可以编写类似于以下内容的 HTML:
<span id="logged-on-username">{{username}}</span>
在这个人为的示例中,在此页面上加载的 JS 文件将返回名为 username 的变量的值并将其插入到视图模板中。
香草 HTML + JS 中是否有类似的可能?
提前感谢任何碰巧回答的人的时间。
解决方案
你的意思是这样的
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/>
推荐阅读
- python - 如何使用 PyTorch 中的“Pythonic”YOLOv5
- android - 在 github 操作上使用 macos-latest 时卡在某个命令上
- python - Django - Giving "a bytes-like object is required, not 'dict'" error while trying to create manual jwt token function
- java - 不推荐使用的方法“startActivityForResult()”与正确设置蓝牙
- amazon-web-services - Appsync 和极光无服务器数据库(在私有子网中)查询生成错误
- javascript - 你能解决 if 语句中的承诺吗?
- python - 如何有效地将多个字典的共享键子集作为多个数组?
- java - 尝试在我的应用程序(WhatsApp StatusSaver)中共享下载的视频时,它在 Android 11 中显示“不支持的文件格式”
- varnish - 过滤访问日志:User-agent 包含“Googlebot”Referer 包含“google”
- android - 使用 SharedFlow Kotlin 实现 PublisherSubject 模式或事件总线