javaScript在html-摘录(2

前言

相关资料:
参照根源-Leo_wlCnBlogs
数据形态-Mr.厉害
html颜色-W3school
作为新手（虽然去了解过一点点js），用了1个月时间，终于勉强做出pre上色。
所有求知欲都磨没了，几天还想不到两行代码。。。

数据体

为了方便结构数组用几个做例子，别的关键字可另行添加

/*数据初始化*/
var hLight={
	keyWord		:{
	0		:'break\n',
	1		:'do\n',
	2		:'else\n',
	3		:'elseif\n',
	4		:'end\n',
	},
	keyPunctuation	:{
	0		:'+',
	1		:'-',
	2		:'*',
	3		:'/',
	},
}

主体

在html底部添加脚本调用：调用preColor()函数；
给文字上色就是添加html的span句子，所以要区分添加顺序。
用for(in)遍历结构体内存的关键字

/*数据操作*/
preColor=function(){
	var pKey=hLight.keyPunctuation,
		wKey=hLight.keyWord,
		
		pTxt,
		tPre=document.getElementsByTagName('pre');
		
	for(let i=0;i<tPre.length;i++){
		pTxt=tPre[i].innerHTML;
		pTxt=preNote(pTxt);
		pTxt=preStr(pTxt);
		for(j in pKey){
			pTxt=prePunctuation(pTxt,pKey[j]);
		}
		for(j in wKey){
			pTxt=preWord(pTxt,wKey[j]);
		}
		pTxt=preDeleteMoer(pTxt);
		tPre[i].innerHTML=pTxt;
	}
}

函数功能

总共4+1，4个功能函数，和一个删除多余html的辅助函数；

一

（这个是根本，剩下的都是它的变型）

/*子函数功能*/
function preWord(sText, key) {//关键字keyWord
	var sKey = "<span class='lus'>" + key + "</span>",
		num = -1,
		rStr = new RegExp(key, "g"),
		rHtml = new RegExp("\<.*?\>", "ig"), //匹配html元素
		aHtml = sText.match(rHtml); //存放html元素的数组
	sText = sText.replace(rHtml, '{~}'); //替换html标签
	sText = sText.replace(rStr, sKey); //替换key
	sText = sText.replace(/{~}/g, function () { //恢复html标签
		num++;
		return aHtml[num];
	});
	return sText;
}

RegExp()统配用的函数
replace()替换函数
match()暂存html句子（这里不包含原文本内容）
RegExp()通配符;
/{~}/g暂时还不能完全明白通配符里的匹配方式，原样照搬吧！
num++;
aHtml[num]这种内函数还是不会用，也是原样照搬。基本概念应该是把储存的html字符串数组给吐回原来位置。

二

function prePunctuation(sText, key){//punctuation符号
	var rStr,sKey;
	switch (key){//特殊字符加减乘的处理
		case '+':rStr = new RegExp('\\+','g'); sKey = "<span class='pun'>" + key + "</span>";break;
		case '-':rStr = new RegExp('\-','g'); sKey = "<span class='pun'>" + key + "</span>";break;
		case '*':rStr = new RegExp('\\*','g'); sKey = "<span class='pun'>" + key + "</span>";break;
		case '(':rStr = new RegExp('\\(','g'); sKey = "<span class='pun'>" + key + "</span>";break;
		case ')':rStr = new RegExp('\\)','g'); sKey = "<span class='pun'>" + key + "</span>";break;
		case '[':rStr = new RegExp('\\[','g'); sKey = "<span class='pun'>" + key + "</span>";break;
		case ']':rStr = new RegExp('\\]','g'); sKey = "<span class='pun'>" + key + "</span>";break;
		case '..':rStr = new RegExp('\\..','g'); sKey = "<span class='pun'>" + key + "</span>";break;
		case '^':rStr = new RegExp('\\^','g'); sKey = "<span class='pun'>" + key + "</span>";break;
		default	:rStr = new RegExp(key,'g'); sKey = "<span class='pun'>" + key + "</span>";
	}
	var	num = -1,
		rHtml = new RegExp("\<.*?\>", "ig"), //匹配html元素
		aHtml = sText.match(rHtml); //存放html元素的数组
	sText = sText.replace(rHtml, '{~}'); //替换html标签
	sText = sText.replace(rStr, sKey); //替换key
	sText = sText.replace(/{~}/g, function () { //恢复html标签
		num++;
		return aHtml[num];
	});
	return sText;
}

三

function preNote(sText){//注释--[[]]--
	var sKeyA = "<span class='note'>" + '--[[',
		sKeyB = ']]-- </span>',
		rStrA = new RegExp('--\\[\\[', 'g'),
		rStrB = new RegExp(']]--','g'),
		num = -1,
		rHtml = new RegExp("\<.*?\>", "ig"), //匹配html元素
		aHtml = sText.match(rHtml); //存放html元素的数组
	sText = sText.replace(rHtml, '{~}'); //替换html标签
	sText = sText.replace(rStrA, sKeyA); //替换key
	sText = sText.replace(rStrB, sKeyB); //替换key
	sText = sText.replace(/{~}/g, function () { //恢复html标签
		num++;
		return aHtml[num];
	});
	return sText;
}

四

这个算是遍历每个字符，原因是‘-’、‘–’和‘\n’在js中互相冲突；’–[['也是一样的问题。

function preStr(sText){//字符串“, ‘, 注释--
	var two, three, rStrA,
		rStrB = "</span>", newstr="",
		charA="'", charB='"',
		note='--', tobe='--\\[', noteOver='\n',
		num = -1,
		rHtml = new RegExp("\<.*?\>", "ig"), //匹配html元素
		aHtml = sText.match(rHtml); //存放html元素的数组
	sText = sText.replace(rHtml, '{~}'); //替换html标签
	for(let i = 0;i < sText.length;i++){
		two = sText[i] + sText[i+1];
		three = sText[i] + sText[i+1] + sText[i+2];
		if(two == note && three != tobe){
			rStrA = "<span class='note'>";
			newstr += rStrA;
			while(sText[i] != noteOver){
				newstr += sText[i];
				i++
			}
			newstr += rStrB;
		}
		if(sText[i] == charA){
			rStrA = "<span class='str'>";
			newstr += rStrA;
			newstr += sText[i];
			i++;
			while(sText[i]!=charA){
				newstr += sText[i];
				i++;
			}
			newstr += sText[i];
			newstr += rStrB;
			continue;
		}
		if(sText[i] == charB){
			rStrA = "<span class='str'>";
			newstr += rStrA;
			newstr += sText[i];
			i++;
			while(sText[i] != charB){
				newstr += sText[i];
				i++;
			}
			newstr += sText[i];
			newstr += rStrB;
			continue;
		}
			newstr += sText[i];
	}
	sText = newstr;
	sText = sText.replace(/{~}/g, function () { //恢复html标签
		num++;
		return aHtml[num];
	});
	return sText;
}

辅助删除

这里遇到’–‘被重复添加了’pun类’，必须替换掉。
另外一个比较烦的问题是sKeyA到C这三个句子，好久都找不到原因“为啥匹配不到！”，后来用console.log(sText)检查时偷懒，直接复制输出内容到代码内，稍作修改（<.*?>替换了</span）,便匹配到了。
总结起来就是：字符串太长，不易找到出错的地方。直接复制输出内容就可以避免匹配问题。

function preDeleteMoer(sText){//删除多余html
	var sKeyA = "<span class='pun'>-<.*?><span class='pun'>-<.*?>",
		sKeyB = "<span class='pun'>\\[<.*?><span class='pun'>\\[<.*?>",
		sKeyC = "<span class='pun'>]<.*?><span class='pun'>]<.*?><span class='note'>",
		rStrA = new RegExp(sKeyA, "ig"),
		rStrB = new RegExp(sKeyB, "ig"),
		rStrC = new RegExp(sKeyC, "ig");
	sText = sText.replace(rStrA,'--');
	sText = sText.replace(rStrB,'[[');
	sText = sText.replace(rStrC,']]');
	return sText;
}

CSS调节

字的颜色在css里调节就行了

.lus{/*关键字*/
	color:red
}
.pun{/*标点符号*/
	color:white
}
.note{/*注释*/
	background-color: white;
	color:black;
}
.str{/*字符串*/
	color:coral
}