按需求弄了一个 取词 以及 标红 的小应用。

先上demo ：

很多平时常用的东西，都用上了，所以拿出来说说。

 

一、代码

var GetKeywords = {	str: "",	limit: 11,	keywords:[],	init : function(){		var box = this._("article"),			_this = this;		//获取已经存在的关键词		this.getAllKeyWord();		//让rmKeyWord函数全局化		window.rmkeyWord = this.rmkeyWord;		//取词事件		box.onmouseup = function(evt){			var evt = evt || window.event,				target = evt.target || evt.srcElement;			//如果鼠标是在button上弹起，则忽略			if(target.id == "btn") return;			GetKeywords.str = _this.getSelectionText();			if(_this.str.length == 0) return;			if(_this._("btn")) {				_this.removeBtn();				if(GetKeywords.str == "") return;				_this.createBtn(evt);				return;			}			_this.createBtn(evt);		}	},	//工具函数	_: function(obj){		return document.getElementById(obj);	},	//获取选中文本	getSelectionText: function(){		if(window.getSelection) {			return window.getSelection().toString();		} else if(document.selection && document.selection.createRange) {			return document.selection.createRange().text;		}		return '';	},	//创建按钮	createBtn: function(evt){		var button = document.createElement("div"),			evt = evt || window.event,			x = evt.pageX || evt.x,			y = evt.pageY || evt.y,			i, j, len,			cssList = "",			_this = this,			csses = {				"height" : "30px",				"line-height" : "30px",				"position": "absolute",				"top": y + 10 + "px",				"left": x + 10 + "px",				"cursor": "pointer",				"border": "1px solid #000",				"background": "#EEE",				"padding": "2px 8px",				"border-radius": "3px"			};		for(i in csses){			if(csses.hasOwnProperty(i)){				cssList += i + ":" + csses[i] + ";";			}		}		button.style.cssText = cssList;		button.innerHTML = "添加到关键词列表";		button.setAttribute("id", "btn");		this._("article").appendChild(button);		button.onclick = function(){			if(_this.str.length > _this.limit){				alert("关键词长度最长为11，可以通过设置GetKeywords.limit来控制长度。");				_this.removeBtn();				return;			}			for(j = 0, len = GetKeywords.keywords.length; j < len; j++){				if(GetKeywords.keywords[j] == _this.str){					alert("已经存在该关键词了~");					_this.removeBtn();					return;				}				continue;			}						_this.keywords.push(_this.str);			_this.setRed(_this.str);			_this.addTo();			_this.removeBtn();		};	},	//删除按钮	removeBtn: function(){		var btn = this._("btn");		btn.parentNode.removeChild(btn);	},	//加入到关键词里列表	addTo: function(){		var word = this._("wordList");		word.innerHTML += "" + this.str + "";	},	//关键词标红	setRed: function(str){		var content = this._("article"),			temp = '(' + str + ')';			reg = new RegExp(temp,'g');		content.innerHTML = content.innerHTML.replace(reg, "$1");	},	//删除标红	rmRed: function(str){		var content = this._("article"),			temp = "(
     
      <]*" + str + ")";			reg = new RegExp(temp,'gi');		content.innerHTML = content.innerHTML.replace(reg, str);	},	//获取已经存在的关键词（也可以用来获取所有关键词）	getAllKeyWord: function (){		var spans = this._("wordList").getElementsByTagName("span"),			key = [], i = 0, len;		for(len = spans.length; i < len; i++){			var font = spans[i].getElementsByTagName("font")[0];			var temp = font.innerText || font.textContent;			this.setRed(temp);			key.push(temp);		}		this.keywords = key;	},	//删除关键词	rmkeyWord: function (obj){		var target = obj.parentNode,			word = obj.previousSibling.innerHTML,			i = 0, len;		GetKeywords.rmRed(word);		for(len = GetKeywords.keywords.length; i < len; i++){			if(GetKeywords.keywords[i] == word){				GetKeywords.keywords.splice(i,i);			}			continue;		}		target.parentNode.removeChild(target);		return;	}}GetKeywords.init();
     

 

以上是所有js代码，比较长，下面将列举一些比较突出的点（望高人多多指点）。

 

二、代码分析

1.获取文本

getSelectionText: function(){    if(window.getSelection) {        return window.getSelection().toString();    } else if(document.selection && document.selection.createRange) {        return document.selection.createRange().text;    }    return '';}

这个在以前（）的文章里也说过，就不赘述了。

 

2.创建控制框

createBtn: function(evt){    var button = document.createElement("div"),        //...        csses = {            "height" : "30px",            "line-height" : "30px",            "position": "absolute",            "top": y + 10 + "px",            "left": x + 10 + "px",            "cursor": "pointer",            "border": "1px solid #000",            "background": "#EEE",            "padding": "2px 8px",            "border-radius": "3px"        };    for(i in csses){        if(csses.hasOwnProperty(i)){            cssList += i + ":" + csses[i] + ";";        }    }    button.style.cssText = cssList;    button.innerHTML = "添加到关键词列表";    button.setAttribute("id", "btn");　　//...}

这里有一点我想说说，在写js的时候，会经常涉及到对DOM对象style的处理，如果不想额外加入一个plugins.css之类的文件，可以像上面一样，将样式放置在一个对象中，然后利用for in将其写入，本来开始我用的是

obj.style[i] = csses[i];

不知道为什么，在IE下报错了，后来便用cssText代替。

效果：

 

3.标红

//关键词标红setRed: function(str){    var content = this._("article"),        temp = '(' + str + ')';        reg = new RegExp(temp,'g');    content.innerHTML = content.innerHTML.replace(reg, "$1");}

这里主要就是正则表达式的事情了，正则的话，推荐两篇文章

• 一篇是司徒正美的，讲的比较全面，比较系统。
• 一篇是30分钟搞定正则，这个讲说是对所有语言，JS的话正则这一块还不是特别完善和强大。

哈哈，相信用过正则的人不需要我来解释这个$1了吧，他的意思就是匹配到的第一个。

当然，删除标红和这个原理是差不多的。

//删除标红rmRed: function(str){    var content = this._("article"),        temp = "(
     
      <]*" + str + ")";        reg = new RegExp(temp,'gi');    content.innerHTML = content.innerHTML.replace(reg, str);}
     

这里是写完这篇blog才发现的一个bug， IE下如果rmRed中的正则是'g',貌似该函数会无效，在IE8控制台下查看，NND，输出innerHTML中的标签全部变成大写了，无奈，只好改成'gi'。

 

4.获取所有关键词和删除关键词

//获取已经存在的关键词（也可以用来获取所有关键词）getAllKeyWord: function (){    //...},//删除关键词rmkeyWord: function (obj){    //...    GetKeywords.rmRed(word);    for(len = GetKeywords.keywords.length; i < len; i++){        if(GetKeywords.keywords[i] == word){            GetKeywords.keywords.splice(i,i);        }        continue;    }    //...}

这个地方，有一个疑问，在调用的时候，使用this.keywords没反应，但是改成GetKeywords就行了，还没研究具体原因是什么~

 

5.初始化

GetKeywords.init();

init()为总入口，进去之后，先获取已经存在的关键词，然后标红，接着绑定onmouseup事件。

 

三、然后

当然咯，这个案例的ajax部分还没写，弄完之后还得给后台送过去。。好吧，明天接着弄吧。

写这玩意儿还是花了点功夫，不过鄙人写代码的水平还在初级阶段，望大神们不要吐槽，多提宝贵意见，谢谢！

然后，还是那个demo，

顺便，推广下，团队做的一个网站，主要技术是爬虫，高峰期PV稳定在120W以上，找工作的童鞋可以多去踩踩~

 

 

P.S：刚让队友测试，还是发现了不少bug，果然考虑问题还是不全面啊~还要继续加油。。。