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 相关文章推荐
jQeury淡入淡出需要注意的问题
Sep 08 Javascript
Javascript变量函数浅析
Sep 02 Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 Javascript
让你一句话理解闭包(简单易懂)
Jun 03 Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
Jul 23 Javascript
js实现ATM机存取款功能
Oct 27 Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 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
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
php 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
php实现的替换敏感字符串类实例
2014/09/22 PHP
PHP获取当前URL路径的处理方法(适用于多条件筛选列表)
2017/02/10 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
php使用curl_init()和curl_multi_init()多线程的速度比较详解
2018/08/15 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
2012/10/11 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
Backbone.js中的集合详解
2015/01/14 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
JavaScript获取DOM元素的11种方法总结
2015/04/25 Javascript
jquery动态遍历Json对象的属性和值的方法
2016/07/27 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
Python打包可执行文件的方法详解
2016/09/19 Python
dataframe设置两个条件取值的实例
2018/04/12 Python
python采集微信公众号文章
2018/12/20 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
巴黎一票通:The Paris Pass
2018/02/10 全球购物
英国发展最快的在线超市之一:Click Marketplace
2021/02/15 全球购物
几个Linux面试题笔试题
2016/08/01 面试题
党的群众路线教育实践活动批评与自我批评
2014/02/16 职场文书
淘宝客服专员岗位职责
2014/04/11 职场文书
保险专业求职信
2014/07/07 职场文书
销售督导岗位职责
2015/04/10 职场文书
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis