↓返回底部
JS PHP HTML5 CSS3 jQuery SQL BootStrap5 Other
其他 字符串 数组 正则 存储 表单 数据库 选择器 屏幕 历史 时间 数学 元素 节点 属性 窗口 地址 动画 棋子 查找 排序 全局 JSON 浏览器 数据类型

js设置 HTML 语法高亮

<meta charset="utf-8">
<style>
#myDiv{ border:dashed 1px #ccc; padding:5px; background-color:#f9f9f9; font-size:22px; line-height:28px; font-weight:bolder;}
</style>

<pre id="myDiv">
<style>
#myDiv{
	border:dashed 1px #ccc;
	padding:5px;
	background-color:#f9f9f9;
	font-size:22px;
	line-height:28px;
}
</style>
<script>
var x = document.getElementById('test');
if(true){
	return false;
}
</script>
<!DOCTYPE html>
<html>
<body>
<h1>设置 HTML 语法高亮</h1>
<p>Hello world!</p>
<a href="http://1500km.com">1500千米</a>
</body>
</html>
</pre>

<script>
KMCodeColor(myDiv);
function KMCodeColor(dbnum, mode){
  
  
  
  
	var lang =(mode || "html");
	var dbnumObj =(document.getElementById(dbnum)|| dbnum);
	var dbnumTxt = dbnumObj.innerHTML;
  
	if(!lang){
		lang = "html"; 
	}
	if(lang == "html"){
		dbnumTxt = htmlMode(dbnumTxt);
	}
	if(lang == "css"){
		dbnumTxt = cssMode(dbnumTxt);
	}
	if(lang == "js"){
		dbnumTxt = jsMode(dbnumTxt);
	}
	dbnumObj.innerHTML = dbnumTxt;



	function extract(str, start, end, func, repl){
		var s, e, d = '', a = [];
		while(str.search(start)> -1){
			s = str.search(start);
			e = str.indexOf(end, s);
			if(e == -1){
				e = str.length;
			}
			if(repl){
				a.push(func(str.substring(s, e +(end.length))));      
				str = str.substring(0, s)+ repl + str.substr(e +(end.length));
			}
			else {
				d += str.substring(0, s);
				d += func(str.substring(s, e +(end.length)));
				str = str.substr(e +(end.length));
			}
		}
		this.rest = d + str;
		this.arr = a;
	}
  
  
  
	function htmlMode(txt){
		var rest = txt, done = '', php, comment, angular, startpos, endpos, note, i;
		comment = new extract(rest, "<!--", "-->", greenColor, "KM_HTML_COMMENT_POS");
		rest = comment.rest;
		while(rest.indexOf("<")> -1){
			note = '';
			startpos = rest.indexOf("<");
			if(rest.substr(startpos, 9).toUpperCase()== "<STYLE"){
				note = "css";
			}
			if(rest.substr(startpos, 10).toUpperCase()== "<SCRIPT"){
				note = "javascript";
			}        
			endpos = rest.indexOf(">", startpos);
			if(endpos == -1){
				endpos = rest.length;
			}
			done += rest.substring(0, startpos);
			done += tagMode(rest.substring(startpos, endpos + 4));
			rest = rest.substr(endpos + 4);
			if(note == "css"){
				endpos = rest.indexOf("</style>");
				if(endpos > -1){
					done += cssMode(rest.substring(0, endpos));
					rest = rest.substr(endpos);
				}
			}
			if(note == "javascript"){
				endpos = rest.indexOf('<'+'/'+'script>');
				if(endpos > -1){
					done += jsMode(rest.substring(0, endpos));
					rest = rest.substr(endpos);
				}
			}
		}
		rest = done + rest;
		for(i = 0; i < comment.arr.length; i++){
			rest = rest.replace("KM_HTML_COMMENT_POS", comment.arr[i]);
		}
		return rest;
	}
  
  
  
	function tagMode(txt){
		var rest = txt, done = '', startpos, endpos, result;
		while(rest.search(/(\s|<br>)/)> -1){    
			startpos = rest.search(/(\s|<br>)/);
			endpos = rest.indexOf(">");
			if(endpos == -1){
				endpos = rest.length;
			}
			done += rest.substring(0, startpos);
			done += attributeMode(rest.substring(startpos, endpos));
			rest = rest.substr(endpos);
		}
		result = done + rest;
		result = greenColor('<')+ result.substring(4);
		if(result.substr(result.length - 4, 4)== ">"){
			result = result.substring(0, result.length - 4)+ greenColor('>');
		}
		return blueColor( result );
	}
  
  
  
	function attributeMode(txt){
		var rest = txt, done = '', startpos, endpos, singlefnuttpos, doublefnuttpos, spacepos;
		while(rest.indexOf("=")> -1){
			endpos = -1;
			startpos = rest.indexOf("=");
			singlefnuttpos = rest.indexOf("'", startpos);
			doublefnuttpos = rest.indexOf('"', startpos);
			spacepos = rest.indexOf(' ', startpos + 2);
			if(spacepos > -1 
				&&(spacepos < singlefnuttpos || singlefnuttpos == -1)&&(spacepos < doublefnuttpos || doublefnuttpos == -1)){
				endpos = rest.indexOf(' ', startpos);      
			}
			else if(doublefnuttpos > -1 
				&&(doublefnuttpos < singlefnuttpos || singlefnuttpos == -1)&&(doublefnuttpos < spacepos || spacepos == -1)){
				endpos = rest.indexOf('"', rest.indexOf('"', startpos)+ 1);
			}
			else if(singlefnuttpos > -1 
				&&(singlefnuttpos < doublefnuttpos || doublefnuttpos == -1)&&(singlefnuttpos < spacepos || spacepos == -1)){
				endpos = rest.indexOf("'", rest.indexOf("'", startpos)+ 1);
			}
			if(!endpos || endpos == -1 || endpos < startpos){
				endpos = rest.length;
			}
			done += rest.substring(0, startpos);
			done += redColor(rest.substring(startpos, endpos + 1));
			rest = rest.substr(endpos + 1);
		}
		return greenColor( done + rest );
	}
  
  
  


  
  
  
  
  
  
	function cssMode(txt){
		var rest = txt, done = '', s, e, comment, i, midz, c, cc;
		comment = new extract(rest, /\/\*/, "*/", greenColor, "KM_CSS_COMMENT_POS");
		rest = comment.rest;
		while(rest.search("{")> -1){
			s = rest.search("{");
			midz = rest.substr(s + 1);
			cc = 1;
			c = 0;
			for(i = 0; i < midz.length; i++){
				if(midz.substr(i, 1)== "{"){
					cc++; 
					c++;
				}
				if(midz.substr(i, 1)== "}"){
					cc--;
				}
				if(cc == 0){
					break;
				}
			}
			if(cc != 0){
				c = 0;
			}
			e = s;
			for(i = 0; i <= c; i++){
				e = rest.indexOf("}", e + 1);
			}
			if(e == -1){
				e = rest.length;
			}
			done += rest.substring(0, s + 1);
			done += cssPropertyMode(rest.substring(s + 1, e));
			rest = rest.substr(e);
		}
		rest = done + rest;
		rest = rest.replace(/{/g, indigoColor('{'));
		rest = rest.replace(/}/g, indigoColor('}'));
		for(i = 0; i < comment.arr.length; i++){
			rest = rest.replace("KM_CSS_COMMENT_POS", comment.arr[i]);
		}
		return fuchsiaColor( rest );
	}
  
  
  
  
  
  
	function cssPropertyMode(txt){
		var rest = txt, done = '', s, e, n, loop;
		if(rest.indexOf("{")> -1 ){ 
			return cssMode(rest); 
		}
		while(rest.search(":")> -1){
			s = rest.search(":");
			loop = true;
			n = s;
			while(loop){
				loop = false;
				e = rest.indexOf(";", n);
				if(rest.substring(e - 5, e + 1)== " "){
					loop = true;
					n = e + 1;
				}
			}
			if(e == -1){
				e = rest.length;
			}
			done += rest.substring(0, s);
			done += cssPropertyValueMode(rest.substring(s, e + 1));
			rest = rest.substr(e + 1);
		}
		return orangeColor( done + rest );
	}
  
  
  
	function cssPropertyValueMode(txt){
		var rest = txt, done = '', s;
		rest = indigoColor(':')+ rest.substring(1);
		while(rest.search(/!important/i)> -1){
			s = rest.search(/!important/i);
			done += rest.substring(0, s);
			done += redColor(rest.substring(s, s + 10));
			rest = rest.substr(s + 10);
		}
		result = done + rest;    
		if(result.substr(result.length - 1, 1)== ";" 
			&& result.substr(result.length - 6, 6)!= " " 
			&& result.substr(result.length - 4, 4)!= "<" 
			&& result.substr(result.length - 4, 4)!= ">" 
			&& result.substr(result.length - 5, 5)!= "&"
		){
			result = result.substring(0, result.length - 1)+ indigoColor(';');
		}
		return greenColor( result );
	}
  

  
  
  
	function jsMode(txt){
		var rest = txt, done = '', esc = [], i, cc, tt = '', sfnuttpos, dfnuttpos, compos, comlinepos, keywordpos, numpos, mypos, dotpos, y;
		for(i = 0; i < rest.length; i++){
			cc = rest.substr(i, 1);
			if(cc == "\\"){
				esc.push(rest.substr(i, 2));
				cc = "KM_JS_ESCAPE";
				i++;
			}
			tt += cc;
		}
		rest = tt;
		y = 1;
		while(y == 1){
		sfnuttpos = getPos(rest, "'", "'", brownColor);
		dfnuttpos = getPos(rest, '"', '"', brownColor);
		compos = getPos(rest, /\/\*/, "*/", greenColor);
		comlinepos = getPos(rest, /\/\//, "<br>", greenColor);      
		numpos = getNumPos(rest, redColor);
		keywordpos = getKeywordPos("js", rest, redColor);
		dotpos = getDotPos(rest, indigoColor);
		if(Math.max(
			numpos[0], 
			sfnuttpos[0], 
			dfnuttpos[0], 
			compos[0], comlinepos[0], 
			keywordpos[0], 
			dotpos[0]
		)== -1){
			break;
		}
		mypos = getMinPos(numpos, sfnuttpos, dfnuttpos, compos, comlinepos, keywordpos, dotpos);
		if(mypos[0] == -1){
			break;
		}
		if(mypos[0] > -1){
			done += rest.substring(0, mypos[0]);
			done += mypos[2](rest.substring(mypos[0], mypos[1]));
			rest = rest.substr(mypos[1]);
		}
		}
		rest = done + rest;
		for(i = 0; i < esc.length; i++){
			rest = rest.replace("KM_JS_ESCAPE", esc[i]);
		}
		return indigoColor(rest);
	}
  
  
  
  
  
  
	function getDotPos(txt, func){
		var x, i, j, s, e, arr = ['.','<', ' ', ';', '(', '+', ')', '[', ']', ',', '&', ':', '{', '}', '/' ,'-', '*', '|', '%'];
		s = txt.indexOf(".");
		if(s > -1){
			x = txt.substr(s + 1);
			for(j = 0; j < x.length; j++){
				cc = x[j];
				for(i = 0; i < arr.length; i++){
					if(cc.indexOf(arr[i])> -1){
						e = j;
						return [s + 1, e + s + 1, func];
					}
				}
			}
		}
		return [-1, -1, func];
	}
  
  
  
	function getMinPos(){
		var i, arr = [];
		for(i = 0; i < arguments.length; i++){
			if(arguments[i][0] > -1){
				if(arr.length == 0 || arguments[i][0] < arr[0]){
					arr = arguments[i];
				}
			}
		}
		if(arr.length == 0){
			arr = arguments[i];
		}
		return arr;
	}
  
  
  
	function getKeywordPos(typ, txt, func){
		var words, i, pos, rpos = -1, rpos2 = -1, patt;
		if(typ == "js"){
			words = ['abstract','arguments','boolean','break','byte','case','catch','char','class','const','continue','debugger','default','delete',
			'do','double','else','enum','eval','export','extends','false','final','finally','float','for','function','goto','if','implements','import',
			'in','instanceof','int','interface','let','long','NaN','native','new','null','package','private','protected','public','return','short','static',
			'super','switch','synchronized','this','throw','throws','transient','true','try','typeof','var','void','volatile','while','with','yield'];
		}
		for(i = 0; i < words.length; i++){
			pos = txt.indexOf(words[i]);
			if(pos > -1){
				patt = /\W/g;
				if(txt.substr(pos + words[i].length,1).match(patt)
					&& txt.substr(pos - 1,1).match(patt)
				){
					if(pos > -1 &&(rpos == -1 || pos < rpos)){
						rpos = pos;
						rpos2 = rpos + words[i].length;
					}
				}
			} 
		}
		return [rpos, rpos2, func];
	}
  
  
  
	function getPos(txt, start, end, func){
		var s, e;
		s = txt.search(start);
		e = txt.indexOf(end, s +(end.length));
		if(e == -1){
			e = txt.length;
		}
		return [s, e +(end.length), func];
	}
  
  
  
	function getNumPos(txt, func){
		var arr = ['<br>', ' ', ';', '(', '+', ')', '[', ']', ',', '&', ':', '{', '}', '/' ,'-', '*', '|', '%', '='], i, j, c, startpos = 0, endpos, word;
		for(i = 0; i < txt.length; i++){
			for(j = 0; j < arr.length; j++){
				c = txt.substr(i, arr[j].length);
				if(c == arr[j]){
					if(c == "-" 
						&&(txt.substr(i - 1, 1)== "e" || txt.substr(i - 1, 1)== "E")){
						continue;
					}
					endpos = i;
					if(startpos < endpos){
						word = txt.substring(startpos, endpos);
						if(!isNaN(word)){
							return [startpos, endpos, func];
						}
					}
					i += arr[j].length;
					startpos = i;
					i -= 1;
					break;
				}
			}
		}  
		return [-1, -1, func];
	}  
  
  
  
  
	function brownColor(x){return '<font color=brown>'+x+'</font>';}
	function orangeColor(x){return '<font color=orange>'+x+'</font>';}
	function greenColor(x){return '<font color=green>'+x+'</font>';}
	function redColor(x){return '<font color=red>'+x+'</font>';}
	function indigoColor(x){return '<font color=indigo>'+x+'</font>';}
	function blueColor(x){return '<font color=blue>'+x+'</font>';}
	function fuchsiaColor(x){return '<font color=fuchsia>'+x+'</font>';}
  
}
</script>

运行结果

 

JavaScript 对象

对象 描述
Array 对象  
Boolean 对象  
Date 对象  
Math 对象  
Number 对象  
String 对象  
RegExp 对象  
全局属性和函数  

Browser 对象

对象 描述
Window 对象  
Navigator 对象  
Screen 对象  
History 对象  
Location 对象  

HTML DOM 参考

对象 描述
HTML Document  
HTML Element  
HTML Attributes  
HTML Events  

HTML DOM 元素

对象 描述
Anchor 对象  
Area 对象  
Base 对象  
Body 对象  
Frame/IFrame 对象  
Frameset 对象  
Link 对象  
Meta 对象  
Object 对象  

Image 对象  
Option 对象  
Select 对象  
Style 对象  
Table 对象  
td / th 对象  
tr 对象  
Button 对象  
Form 对象  
Textarea 对象  

Input Button 对象  
Input Checkbox 对象  
Input File 对象  
Input Hidden 对象  
Input Password 对象  
Input Radio 对象  
Input Reset 对象  
Input Submit 对象  
Input Text 对象  

Input Range 对象  
Input Number 对象  
Input Date 对象  
Input Datetime 对象  
Input Datetime-local 对象  
Input Email 对象  
Input Month 对象  
Input Search 对象  
Input Tel 对象  
Input Time 对象  
Input Url 对象  
Input Week 对象  

 

  • Server Sent | 在线编辑 | 1.php |
  • 欢迎纠错:如果发现错误,请发到我的QQ:3166692976,感谢!
  • 本站及其内容仅作为站长本人学习探索之用途,不保证(包括但不限于)内容的准确性、有效性。本站保留解释权。
  • 心不得满,事不得全。鸟飞不尽,话说不完。休息一下吧!
  • 1500km.com,   Copyright ©2022,   all rights received.
  • ↑返回顶部