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 相关文章推荐
JQuery 解析多维的Json数据格式
Nov 02 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
JS插件overlib用法实例详解
Dec 26 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
Dec 18 Javascript
微信小程序动态添加分享数据
Jun 14 Javascript
在Vue中如何使用Cookie操作实例
Jul 27 Javascript
探索Vue高阶组件的使用
Jan 08 Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 Javascript
Vue项目接入Paypal实现示例详解
Jun 04 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 curl选项列表(超详细)
2013/07/01 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
php实现粘贴截图并完成上传功能
2015/05/17 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
php生出随机字符串
2017/07/06 PHP
php判断目录存在的简单方法
2019/09/26 PHP
js资料toString 方法
2007/03/13 Javascript
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
javascript设置连续两次点击按钮时间间隔的方法
2014/10/28 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
react-router JS 控制路由跳转实例
2017/06/15 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
2017/07/26 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
axios取消请求的实践记录分享
2018/09/26 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
解决layui table表单提示数据接口请求异常的问题
2019/09/24 Javascript
Python编程之event对象的用法实例分析
2017/03/23 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
Python 函数绘图及函数图像微分与积分
2019/11/20 Python
Python 矩阵转置的几种方法小结
2019/12/02 Python
python文件及目录操作代码汇总
2020/07/08 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
CSS3实现千变万化的文字阴影text-shadow效果设计
2016/04/26 HTML / CSS
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
蒂娜商店:Tiina the Store
2019/12/07 全球购物
公司离职证明范本(汇总)
2014/09/10 职场文书
西柏坡观后感
2015/06/08 职场文书
关于空气污染危害的感想
2015/08/11 职场文书
Go 实现英尺和米的简单单位换算方式
2021/04/29 Golang
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python