有时我们有这样的一个需求,对于一篇英语文章,我们想要单击来获取单词,而不是双击获取单词。经过了谷歌一番,我也大致找到了办法。废话不多说,直接上代码:
<html>
<body>
<p>hello how are you ?</p>
<script src="js/jquery.min.js"></script>
<script>
var p = $('p');
p.html(function(index, oldHtml) {
return oldHtml.replace(/\b(\w+?)\b/g, '<span class="word">$1</span>')
});
p.click(function(event) { alert(event.target.innerHTML) });
</script>
</body>
</html>
这里面用到了jquery,效果如下:
可以看到,当我点击how时,就会弹出窗口显示这个窗口,当然还有不尽人意的地方,就是点到单词之间的空隙时会出现意外的效果
这个谷歌到的网址:
http://stackoverflow.com/questions/4643432/get-word-click-in-paragraphs
-------------------------------------------------------------------------------2018-8-20更新-----------------------------------------------------------------
时隔两年了,当年看不懂代码,现在可以讲述一下原理了。。
首先看如下代码:
p.html(function(index, oldHtml) {
return oldHtml.replace(/\b(\w+?)\b/g, '<span class="word">$1</span>')
});
原理就是对一个标签中的html元素中单个的单词进行替换,单词被<span>标签包裹了。当点击该单词,也就是该标签时,会触发事件,通过该事件就可以获得<span>元素的内容。
p.click(function(event) { alert(event.target.innerHTML) });
在对一个标签进行替换时,使用了正则表达式,该表达式进行全局扫描和替换,\b标明这是单词的边界,所以能找到单词,/g指明为全局扫描。$1为正则表达式中小括号()反向引用到的内容,插入到<span>标签中。
于是乎。。就可以单击取词了。