JavaScript获取页面上被选中文字的方法技巧


Posted in Javascript onMarch 13, 2015

这里介绍的一个小技巧是如何用JavaScript获取页面上被选中的文字的方法。最关键的JavaScript API是:

event.selection = window.getSelection();

这里的selection实际上是个对象,但如果我们使用 .toString()或强行转化成字符串,我们将得到被选中的文字。
$(document).ready(function () {

   $(".contenttext").mouseup(function (e) {

    var txt;

    var parentOffset = $(this).offset();

    var x = e.pageX - parentOffset.left;

    var y = e.pageY - parentOffset.top;

    txt = window.getSelection();

    if (txt.toString().length > 1) {

     alert(txt);

    }

   });

  });

如果我们把这段代码放置到下面的页面中:
<html>

   <head>

    <title>Get selected text with JavaScript</title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://3water.com/wordpress/wp-includes/js/jquery/jquery.js" type="text/javascript"></script>

    

   </head>

   <body>

    <div class="contenttext">

     和客户端的 JavaScript 不同的是,PHP 代码是运行在服务端的。如果您在您的服务器上建立了如上例类似的代码,则在运行该脚本后,客户端就能接收到其结果,但他们无法得知其背后的代码是如何运作的。您甚至可以将 WEB 服务器设置成让 PHP 来处理所有的 HTML 文件,这么一来,用户就无法得知服务端到底做了什么。
     使用 PHP 的一大好处是它对于初学者来说及其的简单,同时也给专业的程序员提供了各种高级的特性。当您看到 PHP 长长的特性列表时,请不要害怕。您可以很快的入门,只需几个小时您就可以自己写一些简单的脚本。 

    </div>

   </body>

  </html>

当用鼠标选中页面中的部分文字,同时你就获取到了选中的内容,我在这里使用alert()方法将其显示出来。

JavaScript获取页面上被选中文字的方法技巧

Javascript 相关文章推荐
在网页里看flash的trace数据的js类
Jan 10 Javascript
文本框的字数限制功能jquery插件
Nov 24 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 Javascript
jquery form表单序列化为对象的示例代码
Mar 05 Javascript
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
javascript回到顶部特效
Jul 30 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
jsp 网站引入外部css或者js失效问题解决
Oct 31 Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
vue实现键盘输入支付密码功能
Aug 18 Javascript
jQuery源码分析之Callbacks详解
Mar 13 #Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
Mar 13 #Javascript
Javascript定义类(class)的三种方法详解
Mar 13 #Javascript
JavaScript中5种调用函数的方法
Mar 12 #Javascript
JavaScript实现的一个倒计时的类
Mar 12 #Javascript
JavaScript将XML转成JSON的方法
Mar 12 #Javascript
JavaScript中诡异的delete操作符
Mar 12 #Javascript
You might like
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
php操作mongoDB实例分析
2014/12/29 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
iframe跨域通信封装详解
2015/08/11 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
2018/01/03 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
2018/09/03 jQuery
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
通过实例解析JavaScript for in及for of区别
2020/06/15 Javascript
JS中箭头函数与this的写法和理解
2021/01/14 Javascript
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
[01:12]DOTA2 2015年秋季互动指南
2015/11/10 DOTA
Python strip lstrip rstrip使用方法
2008/09/06 Python
python不带重复的全排列代码
2013/08/13 Python
Python连接Redis的基本配置方法
2018/09/13 Python
python pygame实现方向键控制小球
2019/05/17 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
解决Django连接db遇到的问题
2019/08/29 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
质检部职责
2013/12/28 职场文书
2014村书记党建工作汇报材料
2014/11/02 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
2014年科普工作总结
2014/12/06 职场文书
2015年秋季灭鼠工作总结
2015/07/27 职场文书
Java SSM配置文件案例详解
2021/08/30 Java/Android