JS的Replace的应用——做一个仿真的MarkDown

大家都知道JS可以做很多事情，那么今天，就给大家一个replace()的应用
话不多说（也没什么可说），上代码！

function translate(e)
{
	e=e.replace(/\</g, "&lt;");
	e=e.replace(/\>/g, "&gt;");
	
	e=e.replace(/\`\ /g, "<codetext>");//嵌入文本的code
	e=e.replace(/\ \`/g, "</codetext>");//嵌入文本的code
	
	e=e.replace(/\*\*\ /g, "<b>");
	e=e.replace(/\ \*\*/g, "</b>");
	
	e=e.replace(/\*\ /g, "<i>");
	e=e.replace(/\ \*/g, "</i>");
	
	e=e.replace(/\~\~\ /g, "<del>");
	e=e.replace(/\ \~\~/g, "</del>");
	
	e=e.replace(/\+table/g, "<table border\=\"1\"\>");
	e=e.replace(/\-table/g, "</table>");
	e=e.replace(/\- /g, "<tr><td>");
	e=e.replace(/\|/g, "<td>");
	
	e=e.replace(/\#t1\ /g, "<h1>");
	e=e.replace(/\ t1\#/g, "</h1>");
	e=e.replace(/\#t2\ /g, "<h2>");
	e=e.replace(/\ t2\#/g, "</h2>");
	e=e.replace(/\#t3\ /g, "<h3>");
	e=e.replace(/\ t3\#/g, "</h3>");
	
	e=e.replace(/\+list/g, "<ul>");
	e=e.replace(/\+\ /g, "</li><li>");
	e=e.replace(/\-list/g, "</ul>");
		
	e=e.replace(/\ /g, "&nbsp;");
	e=e.replace(/\	/g, "&nbsp; &nbsp; &nbsp; &nbsp;");//把缩进替换
	
	e=e.split("\n").join("\<br\>");//把textarea的换行转换成<br>
	e=e.replace(/\<br\>\<br\>/g, "<br>");
	
	e=e.replace(/\-\-\-\-/g, "<hr>");//分割线
	e=e.replace(/\[url\]/g, "<a href=\"");//超链接
	e=e.replace(/\[\/url\]/g, "\" target\=\"_blank\">>>></a>");//超链接
	
	e=e.replace(/\[img\]/g, "<img src=\"");//图片
	e=e.replace(/\[\/img\]/g, "\">");//图片
	
	e=e.replace(/\`\`\`code\<br\>/g, "<div class=\"code\" title=\"code\">");//code
	e=e.replace(/\`\`\`/g, "</div>");//code
	
	return e;
}

用法：str=translate(str);
传入：textarea纯文本
返回：加工好的html
为方便各位，给个自编的CSS：

.code{
	background-color:#383838;
	padding:7px;
	border-left:2px solid #ccc;
	border-color:#2196F3;
	border-radius:6px;
	color:white;
	overflow-y:hidden;
	overflow-x:scroll;
	width:95%;
	font-size:13px;
}
.code::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 10px;
    background: #EDEDED;
	height: 5px;
}
.code::-webkit-scrollbar-thumb {
	border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #535353;
	height: 5px;
}
.code::-webkit-scrollbar {
	height: 5px;
}

codetext{
	background-color:#fb98a312;
	padding:1px;
	padding-left:4px;
	padding-right:4px;
	border:none;
	border-radius:4px;
	color:fb98a3;
}
img{
	max-width:90%;
	overflow:scroll;
}

如果发现显示结果的区域超出了显示范围，可在css中加上：

word-wrap:break-word;

差不多了，那看看效果吧(能实现的样式不止这些)：

（本图片截自我的网站写文章部分）

如果有问题，可以在评论区指出哦！