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 相关文章推荐
SUN的《AJAX与J2EE》全文译了
Feb 23 Javascript
JavaScript面向对象(极简主义法minimalist approach)
Jul 17 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
Jan 06 Javascript
动态的创建一个元素createElement及删除一个元素
Jan 24 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 Javascript
Javascript继承机制详解
May 30 Javascript
JavaScript算法教程之sku(库存量单位)详解
Jun 29 Javascript
js实现随机点名小功能
Aug 17 Javascript
浅谈react前后端同构渲染
Sep 20 Javascript
vue项目创建步骤及路由router
Jan 14 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递归调用的小技巧讲解
2013/02/19 PHP
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
生成二维码方法汇总
2014/12/26 Javascript
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
Angular4编程之表单响应功能示例
2017/12/13 Javascript
详解JSON Web Token 入门教程
2018/07/30 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
VUE渲染后端返回含有script标签的html字符串示例
2019/10/28 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
vue实现修改图片后实时更新
2019/11/14 Javascript
Vue.js的模板语法详解
2020/02/16 Javascript
Python使用三种方法实现PCA算法
2017/12/12 Python
windows 下python+numpy安装实用教程
2017/12/23 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
postman和python mock测试过程图解
2020/02/22 Python
python字符串判断密码强弱
2020/03/18 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
PyCharm 解决找不到新打开项目的窗口问题
2021/01/15 Python
naturalizer加拿大官网:美国娜然女鞋
2017/04/04 全球购物
优秀的教师个人的中文求职信
2013/09/21 职场文书
高三自我评价
2014/02/01 职场文书
战略合作意向书范本
2014/04/01 职场文书
维稳工作承诺书
2015/01/20 职场文书
医院中层管理人员培训心得体会
2016/01/11 职场文书
学习党章心得体会2016
2016/01/15 职场文书