按需求弄了一个 取词 以及 标红 的小应用。
先上demo ：http://qianduannotes.sinaapp.com/getKeyword/
很多平时常用的东西，都用上了，所以拿出来说说。
一、代码
以上是所有js代码，比较长，下面将列举一些比较突出的点（望高人多多指点）。
二、代码分析
1.获取文本
getSelectionText: function(){ if(window.getSelection) { return window.getSelection().toString(); } else if(document.selection && document.selection.createRange) { return document.selection.createRange().text; } return ''; }
这个在以前（JavaScript操控光标，你会么？）的文章里也说过，就不赘述了。
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, "<span style='color:red;'>$1</span>"); }
这里主要就是正则表达式的事情了，正则的话，推荐两篇文章
哈哈，相信用过正则的人不需要我来解释这个$1了吧，他的意思就是匹配到的第一个。
当然，删除标红和这个原理是差不多的。
//删除标红 rmRed: function(str){ var content = this._("article"), temp = "(<span[^<]*" + str + "</span>)"; 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，http://qianduannotes.sinaapp.com/getKeyword/
顺便，推广下，团队做的一个网站，主要技术是爬虫，高峰期PV稳定在120W以上，找工作的童鞋可以多去踩踩~
P.S：刚让队友测试，还是发现了不少bug，果然考虑问题还是不全面啊~还要继续加油。。。
本文转自Barret Lee博客园博客，原文链接：http://www.cnblogs.com/hustskyking/archive/2013/05/04/getkeywords.html，如需转载请自行联系原作者
