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

先上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='#' οnclick='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;}
    //...
}

这个地方,有一个疑问,在调用的时候,使用this.keywords没反应,但是改成GetKeywords就行了,还没研究具体原因是什么~

5.初始化

GetKeywords.init();

init()为总入口,进去之后,先获取已经存在的关键词,然后标红,接着绑定onmouseup事件。

三、然后

当然咯,这个案例的ajax部分还没写,弄完之后还得给后台送过去。。好吧,明天接着弄吧。

写这玩意儿还是花了点功夫,不过鄙人写代码的水平还在初级阶段,望大神们不要吐槽,多提宝贵意见,谢谢!

然后,还是那个demo,http://qianduannotes.sinaapp.com/getKeyword/

顺便,推广下,团队做的一个网站,主要技术是爬虫,高峰期PV稳定在120W以上,找工作的童鞋可以多去踩踩~

宣讲会查询系统——海投网 

P.S:刚让队友测试,还是发现了不少bug,果然考虑问题还是不全面啊~还要继续加油。。。

转载于:https://www.cnblogs.com/hustskyking/archive/2013/05/04/getkeywords.html

Javascript综合应用小案例相关推荐

  1. Javascript综合应用小案例(续)

    上一篇文章,弄了一个 取词 和 标红 功能的小应用,但是存在一些bug,今天修修补补,顺便也把ajax部分补上了~ Demo地址::http://qianduannotes.sinaapp.com/g ...

  2. JavaScript 国庆倒计时小案例

    本次实现js国庆倒计时小案例 开发工具与关键技术:Visual Studio 2015 JavaScript 当然 首先还是先写出大概样式如下图: 之后便是我的css样式了: 下图便是在页面加载完成的 ...

  3. JavaScript 练手小案例:超级简单又炫酷的图片手风琴效果

    手风琴效果很流行,可以任意展开收缩内容,甚是好看. 特效要求 鼠标移动到图片上,当前图片放大,其他图片收缩. HTML <div class="pics"><ul ...

  4. HTML5+CSS3+JavaScript 阶段性实践小案例——京东购物车

    目录 一.素材提取方法 二.图标 三.实现 (1)效果图 (2)图片素材 (3)代码 花了三天时间将HTML4,HTML5,CSS2,CSS3大致学习了一下,现在来做一个网页实践一下,我是准备专攻后端 ...

  5. JavaScript事件——【小案例】小人快跑

    效果图: images: 操作:       按"上" "下" "左" "右" 键控制小人移动方向 步骤:        ...

  6. JavaScript事件——【小案例】飞机发射子弹

    效果图: 步骤: 1.规定飞机的走向 ( 键盘事件 ) 2.发射子弹 ( 子弹位置:left top ) 图片素材: 飞机:shoot/1.gif 子弹:shoot/2.png 完整代码如下: < ...

  7. php简单网络相册管理系统,Javascript实现网络相册小案例

    html> 网络相册 图一 图二 图三 //获取全部相册链接 var a = document.getElementsByTagName('a'); //循环赋予点击事件 for(var i=0 ...

  8. click 点击图片不起作用_JavaScript 练手小案例:基于SVG的图片切换效果

    最近太忙了,自动来到rjxy后,不晓得怎么回事,忙的都没时间更博了. 昨天还有个同学跟我说,你好久没更新博客了.. 甚为惭愧~~ 正好12月来了,今天开一篇. 最近上课讲到了 SVG,不晓得同学们理解 ...

  9. HTML+CSS+JavaScript小案例(注册页面表单验证轮播图跳转主页动态表格select联动)

    案例:(表单验证) <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...

最新文章

  1. 从上往下 流式布局_教大家怎么写前端布局
  2. 服务器放n个网站,服务器放n个网站
  3. 服务器LIMIT是什么信号,Postfix添加milter-limit配置方案
  4. 校验json格式_不来学一下SpringBoot统一参数校验?
  5. html5游戏制作入门系列教程(八)
  6. mysql查询时传入中文时的乱码问题
  7. web端权限维持【好文】
  8. http协议(十)实体首部字段
  9. 2018年1月问答系统综述
  10. 日记【2010-6-2】
  11. 用Java实现N*N的标准数独及对角线数独解题
  12. PS教程:如何拼图调色出高大上的作品
  13. ios浏览器微信支付回调页面_iOS微信支付结果页面返回原程序按钮
  14. 数据仓库、数据湖、数据平台和数据中台的概念和区别
  15. 简单概括HAPI(Houdini Engine API)所涵盖的功能
  16. MySQL原理与学习
  17. 一款简单而强大的截图软件 Snipaste
  18. html下拉框的宽度怎么设置,在HTML选择下拉选项中设置下拉元素的宽度
  19. spin_lock_bh()与spin_unlock_bh()
  20. EVT、PVT、DVT

热门文章

  1. python爬取b站评论_学习笔记(1):写了个python爬取B站视频评论的程序
  2. php 类 和 函数,PHP函数和类
  3. mysql内置时间函数大全_MySQL 的时间函数 大全
  4. python如何移动图片_Pygame的图像移动|python基础教程|python入门|python教程
  5. python创建一个csv文件_python操作csv文件
  6. 【算法】剑指 Offer 12. 矩阵中的路径
  7. 95-18-015-配置-AbstractBootstrapConfig
  8. 【Elasticsearch】 Elasticsearch中数据是如何存储的
  9. 【Elasticsearch】技术专栏 | 利用HDFS备份实现Elasticsearch容灾
  10. 【es】使用ElasticSearch的44条建议 性能优化