题目大概是这个意思，当时糊里糊涂的也没答出来，后来回来想试一下，我的实现方法是用replace
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="scope">
<h1>{{ title }}</h1>
<div>
{{ content }}
</div>
<div>
我的名字叫：{{ author }}
</div>
</div>
<script>
let scope = document.getElementById('scope')
let htmlString = scope.innerHTML;
let json = {
"title": '替换花括号',
"content": '这是内容部分',
"author": 'OlyLis'
};
// 获取html中带花括号的内容
let keyInHtml = htmlString.match(/\{\{([^\{^\}]+)\}\}/g);
let allKeys = keyInHtml.map(content => {
// 去除花括号和空格获取key
let key = content.replace(/\{|\}|\s/g, '');
return key;
});
keyInHtml.forEach((beforeReplace, index) => {
// 将html中的花括号替换成json对应的内容
htmlString = htmlString.replace(beforeReplace, json[allKeys[index]] || '');
});
scope.innerHTML = htmlString;
</script>
</body>
</html>
面试碰到的一道题，答案我也不知道，有更好的实现方法讨论区告诉我吧