Javascript综合应用小案例

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

先上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 = , "$1");

}

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

•一篇是司徒正美的，讲的比较全面，比较系统。点我链接过去→

•一篇是30分钟搞定正则，这个讲说是对所有语言，JS的话正则这一块还不是特别完善和强大。点我链接过去→

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

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

//删除标红

rmRed: function(str){

var content = this._("article"),

temp = "()";

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事件。