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 相关文章推荐
window.location和document.location的区别分析
Dec 23 Javascript
js时间日期和毫秒的相互转换
Feb 22 Javascript
extjs每个组件要设置唯一的ID否则会出错
Jun 15 Javascript
jQuery大于号(&gt;)选择器的作用解释
Jan 13 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
Dec 04 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
Nov 29 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 Javascript
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
vue源码中的检测方法的实现
Sep 26 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
Nov 07 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 Javascript
angular异步验证器防抖实例详解
Mar 31 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
评分9.0以上的动画电影,剧情除了经典还很燃
2020/03/04 日漫
提高php运行速度的一些小技巧分享
2012/07/03 PHP
Laravel框架下的Contracts契约详解
2020/03/17 PHP
jQuery学习笔记之jQuery动画效果
2013/09/09 Javascript
JS获取时间的方法
2015/01/21 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
2017/02/09 Javascript
Vue 进阶教程之v-model详解
2017/05/06 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
jQuery 改变P标签文本值方法
2018/02/24 jQuery
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
2019/12/01 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
tensorflow模型保存、加载之变量重命名实例
2020/01/21 Python
python第三方库学习笔记
2020/02/07 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
解决python 在for循环并且pop数组的时候会跳过某些元素的问题
2020/12/11 Python
python中用Scrapy实现定时爬虫的实例讲解
2021/01/18 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
测试驱动开发的主要步骤是什么
2014/12/10 面试题
办公室文秘岗位职责
2013/11/15 职场文书
市场营销毕业生自荐信范文
2014/04/01 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
工作态度怎么写
2015/06/25 职场文书
七一慰问简报
2015/07/20 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android