代码分行

最新推荐文章于 2022-01-11 23:13:24 发布

ccyingfu

最新推荐文章于 2022-01-11 23:13:24 发布

阅读量387

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/ccyingfu/article/details/84008512

版权

JavaScript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏


<!DOCTYPE html">
<html>
 <head>
  <title>
  </title>
<style>
	html,body{font-family:Arial}
	div,ol,li{margin-top:0;margin-bottom:0;}
	div{border:1px solid red}
	li{margin:0;border-left:1px red solid;padding-left:15px;padding:0;color:#860303}
	li:hover{background-color:#abcdef}

	.red{color:red}
	.blue{color:blue}
</style>


	<script>
		function setContent(msg){
			var msgArr = msg.split(/[\r\n]/);
			forEach(msgArr, function(msg, i){
				var strArr = [], str = "";
				for(var i = 0, len = msg.length; i < len; i++){
					if(encodeURIComponent(msg.charAt(i)) == "%09"){
						strArr.push("    ");
					}else if(encodeURIComponent(msg.charAt(i)) == "%20"){
						strArr.push(" ");
					}else{
						var temp = msg.charAt(i).replace(/&/,"&");
						temp = temp.replace(/</,"<").replace(/>/,">");
						strArr.push(temp);
					}
				}
				forEach(strArr,function(s){
					str += s;
				})
				forEach(redVar,function(v){
					str = str.replace(new RegExp(v,"g"),"<span class='red'>"+v+"</span>");
				});
				forEach(blueVar,function(v){
					str = str.replace(new RegExp("\b"+v+"\b","g"),"<span class='blue'>"+v+"</span>");
				});
				c("li",str,$("ol"));
			});
		}
		var $ = function(id){return document.getElementById(id)},
			c = function(tagName,html,p){
				var tag = document.createElement(tagName);
				tag.innerHTML = html;
				app(tag,p);
			},
			forEach = function(arr,fn){
				for(var i = 0, len = arr.length; i < len; i++){
					fn.call(this, arr[i], i);
				}
			},
			app = function(c,p){
				p.appendChild(c);
			},
			redVar = ["window","document","location","navigator"],
			blueVar = ["var","in","for","function"];

		window.onload = function(){
			var ta = $("ta");
			var btn = $("btn");
			btn.onclick = function(){
				$("ol").innerHTML = "";
				setContent(ta.value);
			}
		}
	</script>


 </head>

 <body>
	<textarea id="ta" cols="66" rows="6">
	</textarea>
	<button id="btn">setContent</button>
	<div>
	<ol id="ol">

	</ol>
	</div>
 </body>
</html>