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 相关文章推荐
将函数的实际参数转换成数组的方法
Jan 25 Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
jQuery UI库中dialog对话框功能使用全解析
Apr 23 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
Jul 22 Javascript
jQuery购物网页经典制作案例
Aug 19 Javascript
微信小程序 页面跳转传参详解
Oct 28 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
Mar 01 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
Apr 15 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
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
关于Intype一些小问题的解决办法
2008/03/28 PHP
ThinkPHP之import方法实例详解
2014/06/20 PHP
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
js计数器代码
2006/11/04 Javascript
form中限制文本字节数js代码
2007/06/10 Javascript
js用图作提交按钮或超连接
2008/03/26 Javascript
ext form 表单提交数据的方法小结
2008/08/08 Javascript
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
JavaScript插件化开发教程(五)
2015/02/01 Javascript
javascript实现汉字转拼音代码分享
2015/04/20 Javascript
js选择器全面解析
2016/06/27 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
element-ui如何防止重复提交的方法步骤
2019/12/09 Javascript
实例讲解React 组件生命周期
2020/07/08 Javascript
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
Python读写配置文件的方法
2015/06/03 Python
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
python中MethodType方法介绍与使用示例
2017/08/03 Python
python如何生成网页验证码
2018/07/28 Python
java判断三位数的实例讲解
2019/06/10 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
2021/03/05 HTML / CSS
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
品德评语大全
2014/05/05 职场文书
交通文明倡议书
2014/05/16 职场文书
大型演出策划方案
2014/05/28 职场文书
个人遵守党的政治纪律情况对照检查材料思想汇报
2014/09/25 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
详解Flask开发技巧之异常处理
2021/06/15 Python
Python中requests库的用法详解
2022/06/05 Python