Javascript综合应用小案例

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, "&lt;span style='color:red;'&gt;$1&lt;/span&gt;");

  },
  //删除标红
  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();