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 相关文章推荐
js模拟弹出效果代码修正版
Aug 07 Javascript
运用jquery实现table单双行不同显示并能单行选中
Jul 25 Javascript
Knockout数组(observable)使用详解示例
Nov 15 Javascript
在Node.js中实现文件复制的方法和实例
Jun 05 Javascript
Javascript基础教程之函数对象和属性
Jan 18 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
Feb 19 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
Vue 进阶教程之v-model详解
May 06 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
vue实现多个元素或多个组件之间动画效果
Sep 25 Javascript
vue实现输入框自动跳转功能
May 20 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入门源程序
2006/10/09 PHP
php foreach 使用&amp;(与运算符)引用赋值要注意的问题
2010/02/16 PHP
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
基于JQuery的多标签实现代码
2012/09/19 Javascript
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
2013/09/10 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
import与export在node.js中的使用详解
2017/09/28 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
2018/07/23 jQuery
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
layui按条件隐藏表格列的实例
2019/09/19 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
python实现图片识别汽车功能
2018/11/30 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
美国最大的网上冲印店:Shutterfly
2017/01/01 全球购物
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
软件缺陷的分类都有哪些
2014/08/22 面试题
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
致800米运动员广播稿(10篇)
2014/10/17 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
自主招生自荐信格式
2015/03/04 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
Python基础之条件语句详解
2021/06/16 Python
HTML5 语义化标签(移动端必备)
2021/08/23 HTML / CSS