一个HTML模板和一个json，如何把这个页面展示出来

最新推荐文章于 2024-06-04 09:52:15 发布

OlyLis

最新推荐文章于 2024-06-04 09:52:15 发布

阅读量889

点赞数

本文链接：https://blog.csdn.net/lister1005/article/details/88672681

版权

题目大概是这个意思，当时糊里糊涂的也没答出来，后来回来想试一下，我的实现方法是用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>

面试碰到的一道题，答案我也不知道，有更好的实现方法讨论区告诉我吧

OlyLis

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个HTML模板和一个json，如何把这个页面展示出来

题目大概是这个意思，当时糊里糊涂的也没答出来，后来回来想试一下，我的实现方法是用replace<!DOCTYPE html><html><head> <title></title></head><body><div id="scope"> <h1>{{ title }...
复制链接

扫一扫