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 相关文章推荐
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
Aug 05 Javascript
javascript中获取元素标签中间的内容的实现方法
Oct 08 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
Aug 28 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开发中的错误收集,不定期更新。
2011/02/03 PHP
PHP 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
PHP二维数组去重算法
2016/12/17 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
Javascript 同时提交多个Web表单的方法
2009/02/19 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
node.js中的fs.fsync方法使用说明
2014/12/15 Javascript
Jquery实现仿京东商城省市联动菜单
2015/11/19 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
javascript事件冒泡简单示例
2016/06/20 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
JavaScript获取URL参数的方法之一
2017/03/24 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
2018/03/12 Javascript
JavaScript中this关键字用法实例分析
2018/08/24 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
Vue实现跑马灯效果
2020/05/25 Javascript
Javascript confirm多种使用方法解析
2020/09/25 Javascript
[01:59]深扒TI7聊天轮盘语音出处 1
2017/05/11 DOTA
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
详解windows python3.7安装numpy问题的解决方法
2018/08/13 Python
python解析含有重复key的json方法
2019/01/22 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
Python生态圈图像格式转换问题(推荐)
2019/12/02 Python
德国最大的婴儿用品网上商店:Kidsroom.de(支持中文)
2020/09/02 全球购物
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
如何利用find命令查找文件
2015/02/07 面试题
大学生应聘自荐信
2013/10/11 职场文书
内刊编辑求职自荐书范文
2014/02/19 职场文书
五年级学生评语
2014/04/22 职场文书
教师调动申请报告
2015/05/18 职场文书
美丽的大脚观后感
2015/06/03 职场文书
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL