笔试题 --模拟md文件

最新推荐文章于 2022-03-11 14:51:10 发布

笨蛋-木呆呆

最新推荐文章于 2022-03-11 14:51:10 发布

阅读量287

点赞数

分类专栏：面经

本文链接：https://blog.csdn.net/qq_33401832/article/details/86483344

版权

面经专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需求：模拟markdown文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html,body{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
textarea{
	width: 48%;
	height: 100%;
	float: left;
}
#box{
	width: 50%;
	height: 100%;
	overflow: scroll;
	float: left;
}
.node{
	background: rgba(0,0,0,.05);
}
.nodeB{
	background: #2d2d2d;
}
</style>
</head>
<body>
<textarea id='textNode'></textarea>
<div id='box'></div>
<script type="text/javascript">
var textNode = document.getElementById('textNode');
var tm;
textNode.onkeyup = function() {
	clearTimeout(tm);
	tm = setTimeout(fn, 500); 
}
function fn(e) {
	var codeFlag = false;// 用于判断代码双标签
	var textValue = textNode.value;
	var arr = textValue.split(/\r|\n/g).filter(function (s) {
		return s && s.trim(); // 注：IE9(不包含IE9)以下的版本没有trim()方法
	});
	arr = arr.map(function(item) {
		if(!codeFlag) {
			if(/^```/.test(item)) {
				codeFlag = true;
				if(/`$/.test(item)){
					return "<div class='node'>";
				}
				return "<div class='nodeB'>";
			}
			if(/^#/.test(item)) {
				var tit = item.substring(0,item.indexOf(' ')),
					len = tit.length,
					str = item.substring(item.indexOf(' ') + 1);
				if (len <= 6) {
					item = item.replace(str, `${str}</h${len}>`).replace(tit, `<h${len}>`);
					
				}
			}
			if(/\!\[tmall\]\(.+\)/.test(item)){
				str = item.substring(item.indexOf('![tmall](') + 1, item.length -1);
				item.match(/\!\[.+\]\(.+\)/).forEach(function(i) {
					var alt = /\!\[(.+)\]/.exec(i)[1];
					var src = /\((.+)\)/.exec(i)[1];
					item = item.replace(i, `<img src=${src} alt=${alt}/>`);
				})
			}
			if(/\[.+]\(.+\)/.test(item)){
				item.match(/\[.+]\(.+\)/).forEach(function(i) {
					var href = /\((.+)\)/.exec(i)[1];
					var text = /\[(.+)\]/.exec(i)[1];
					item = item.replace(i, `<a href=${href}>${text}</a>`);
				})
			}
		}
		if(/^```/.test(item)) {
			codeFlag = false;
			return "</div>";
		}
		return item;
	});
	console.log(arr);
	var box1 = document.getElementById('box');
	box1.innerHTML = arr;
}
</script>
</body>
</html>

未完待续