按需求弄了一个取词以及标红的小应用。
先上demo :/
很多平时常用的东西,都用上了,所以拿出来说说。
一、代码
View Code
以上是所有js代码,比较长,下面将列举一些比较突出的点(望高人多多指点)。
二、代码分析
1.获取文本
getSelectionText: function(){
if(window.getSelection) {
return window.getSelection().toString();
} else if(document.selection && {
return;
}
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] + ";";
}
}
=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 = , "<span style='color:red;'>$1</span>");
}
这里主要就是正则表达式的事情了,正则的话,推荐两篇文章
•一篇是司徒正美的,讲的比较全面,比较系统。
点我链接过去→
•一篇是30分钟搞定正则,这个讲说是对所有语言,JS的话正则这一块还不是特别完善和强大。
点我链接过去→
哈哈,相信用过正则的人不需要我来解释这个$1了吧,他的意思就是匹配到的第一个。
当然,删除标红和这个原理是差不多的。
//删除标红
rmRed: function(str){
var content = this._("article"),
temp = "(<span[^<]*" + str + "</span>)";
reg = new RegExp(temp,'g i');
content.innerHTML = , str);
}
这里是写完这篇blog才发现的一个bug,IE下如果rmRed中的正则是'g',貌似该函数会无效,在IE8控制台下查看,NND,输出innerHTML中的标签全部变成大写了,无奈,只好改成'gi'。
4.获取所有关键词和删除关键词
//获取已经存在的关键词(也可以用来获取所有关键词)
getAllKeyWord: function(){
//...},
//删除关键词
rmkeyWord: function(obj){
//... GetKeywords.rmRed(word);
for(len = ; i < len; i++){
if(GetKeywords.keywords[i] == word){
,i);
}
continue;
}
//...}
这个地方,有一个疑问,在调用的时候,使用this.keywords没反应,但是改成GetKeywords 就行了,还没研究具体原因是什么~
5.初始化
GetKeywords.init();
init()为总入口,进去之后,先获取已经存在的关键词,然后标红,接着绑定onmouseup事件。