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 相关文章推荐
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
jQuery取id有.的值的方法
May 21 Javascript
改变checkbox默认选中状态及取值的实现代码
May 26 Javascript
jQuery实现的自动加载页面功能示例
Sep 04 Javascript
jQuery实现手机上输入后隐藏键盘功能
Jan 04 Javascript
JS实现根据密码长度显示安全条功能
Mar 08 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
Sep 14 Javascript
详解如何使用babel进行es6文件的编译
May 29 Javascript
webpack项目轻松混用css module的方法
Jun 12 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
Sep 18 Javascript
taro开发微信小程序的实践
May 21 Javascript
Vue实现商品分类菜单数量提示功能
Jul 26 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
239军机修复记
2021/03/02 无线电
阿里云PHP SMS短信服务验证码发送方法
2017/07/11 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
PHP 实现链式操作
2021/03/09 PHP
基于jquery的分页控件(C#)
2011/01/06 Javascript
JS 页面计时器示例代码
2013/10/28 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
js/jq仿window文件夹框选操作插件
2017/03/08 Javascript
Flask中获取小程序Request数据的两种方法
2017/05/12 Javascript
ES6中Array.includes()函数的用法
2017/09/20 Javascript
JS数组去重的6种方法完整实例
2018/12/08 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
webpack+express实现文件精确缓存的示例代码
2020/06/11 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
利用Python实现简单的相似图片搜索的教程
2015/04/23 Python
Python设计模式之中介模式简单示例
2018/01/09 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
使用python PIL库实现简单验证码的去噪方法步骤
2019/05/10 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
详细分析Python垃圾回收机制
2020/07/01 Python
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
体育教师自荐信范文
2013/12/16 职场文书
信息技术教学反思
2014/02/12 职场文书
2014年预备党员学习两会心得体会
2014/03/17 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
学风建设演讲稿
2014/09/12 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
高中班主任工作总结(范文)
2019/08/20 职场文书
PHP连接MSSQL数据库案例,PHPWAMP多个PHP版本连接SQL Server数据库
2021/04/16 PHP