Javascript综合应用小案例

2013-05-04 02:38 Barret李靖阅读(2395) 评论(10) 编辑收藏举报

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

先上demo ：http://qianduannotes.sinaapp.com/getKeyword/

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

一、代码

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 += "<span><font>" + this.str + "</font><a href='#' onclick='rmkeyWord(this);'></a></span>";
    },
 
    //关键词标红
    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>");
    },
 
    //删除标红
    rmRed: function(str){
        var content = this._("article"),
            temp = "(<span[^<]*" + str + "</span>)";
            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 '';
}

这个在以前（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>");
}

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

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

哈哈，相信用过正则的人不需要我来解释这个$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;
    }
    //...
}