编程 Javascript

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获取页面上被选中文字的方法技巧

- Author -

junjie

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Javascript 构造函数实例分析

Nov 26 Javascript

JavaScript 更严格的相等 [译]

Sep 20 Javascript

js查找节点的方法小结

Jan 13 Javascript

微信小程序 form组件详解

Oct 25 Javascript

JavaScript动态检验密码强度的实现方法

Nov 09 Javascript

微信小程序之MaterialDesign--input组件详解

Feb 15 Javascript

canvas绘制爱心的几种方法总结(推荐)

Oct 31 Javascript

基于Bootstrap实现城市三级联动

Nov 23 Javascript

10行代码实现微信小程序滑动tab切换

Dec 28 Javascript

js作用域和作用域链及预解析

Apr 11 Javascript

JavaScript如何获取一个元素的样式信息

Jul 29 Javascript

js刷新页面location.reload()用法详解

Dec 09 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