JavaScript獲取頁面上被選中文字的方法技巧

更新時間：2015年03月13日 09:32:05 投稿：junjie

這篇文章主要介紹了JavaScript獲取頁面上被選中文字的方法技巧,本文直接給出實(shí)現(xiàn)代碼和運(yùn)行效果,需要的朋友可以參考下

這里介紹的一個小技巧是如何用JavaScript獲取頁面上被選中的文字的方法。最關(guān)鍵的JavaScript API是：

event.selection = window.getSelection();

這里的selection實(shí)際上是個對象，但如果我們使用 .toString()或強(qiáng)行轉(zhuǎn)化成字符串，我們將得到被選中的文字。

$(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);

    }

   });

  });

如果我們把這段代碼放置到下面的頁面中：

復(fù)制代碼代碼如下:

<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="http://www.dhdzp.com/wordpress/wp-includes/js/jquery/jquery.js" type="text/javascript"></script>

   </head>
   <body>
    <div class="contenttext">
     和客戶端的 JavaScript 不同的是，PHP 代碼是運(yùn)行在服務(wù)端的。如果您在您的服務(wù)器上建立了如上例類似的代碼，則在運(yùn)行該腳本后，客戶端就能接收到其結(jié)果，但他們無法得知其背后的代碼是如何運(yùn)作的。您甚至可以將 WEB 服務(wù)器設(shè)置成讓 PHP 來處理所有的 HTML 文件，這么一來，用戶就無法得知服務(wù)端到底做了什么。

     使用 PHP 的一大好處是它對于初學(xué)者來說及其的簡單，同時也給專業(yè)的程序員提供了各種高級的特性。當(dāng)您看到 PHP 長長的特性列表時，請不要害怕。您可以很快的入門，只需幾個小時您就可以自己寫一些簡單的腳本。
    </div>
   </body>
  </html>

當(dāng)用鼠標(biāo)選中頁面中的部分文字，同時你就獲取到了選中的內(nèi)容，我在這里使用alert()方法將其顯示出來。

您可能感興趣的文章:

相關(guān)文章

Element-plus安裝及基礎(chǔ)組件使用詳解
ElementPlus是一個基于Vue3的UI組件庫,旨在提供豐富的HTML元素封裝,以簡化前端開發(fā),主要特點(diǎn)包括預(yù)定義樣式、事件處理、易用性等,為開發(fā)者提供了一致且美觀的用戶界面,同時支持按需導(dǎo)入,提高項(xiàng)目效率,感興趣的朋友一起看看吧
2024-09-09
微信小程序?qū)崿F(xiàn)禁止分享代碼實(shí)例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)禁止分享代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-10-10
JavaScript判斷是否為數(shù)字的幾種方式匯總(推薦!)
有時候需要根據(jù)輸入的內(nèi)容來進(jìn)行計(jì)算,這個時候就需要判斷輸入的內(nèi)容是否是數(shù)字,下面這篇文章主要給大家介紹了關(guān)于JavaScript判斷是否為數(shù)字的幾種方式,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-06-06
javascript進(jìn)行數(shù)組追加方法小結(jié)
javascript中給數(shù)組加元素是一個非常簡單的問題,javascript本身就提供了大量這類函數(shù)，我們可以使用js自帶函數(shù)快速給數(shù)組增加元素了，本文就javascript進(jìn)行數(shù)組追加的方法做出如下小結(jié)。
2014-06-06
一些常用且實(shí)用的原生JavaScript函數(shù)
日常開始中常用到的一些原生JavaScript函數(shù),比較實(shí)用, 今天特地整理一下,分享給大家,希望對大家有用,會常更新,同時也歡迎大家補(bǔ)充.
2010-09-09
原生js實(shí)現(xiàn)移動端Touch輪播圖的方法步驟
這篇文章主要介紹了原生js實(shí)現(xiàn)移動端Touch輪播圖的方法步驟，touch輪播圖其實(shí)就是通過手指的滑動，來左右切換輪播圖，touch輪播圖其實(shí)就是通過手指的滑動，來左右切換輪播圖，
2019-01-01
js由下向上不斷上升冒氣泡效果實(shí)例
這篇文章主要介紹了js由下向上不斷上升冒氣泡效果,實(shí)例分析了javascript操作鼠標(biāo)事件、圖片及樣式的相關(guān)技巧,需要的朋友可以參考下
2015-05-05
推薦js實(shí)現(xiàn)商品分類到搜索欄友好提示（人機(jī)交互）
推薦js實(shí)現(xiàn)商品分類到搜索欄友好提示（人機(jī)交互）...
2007-05-05
javascript閉包概念簡單解析(推薦)
下面小編就為大家?guī)硪黄猨avascript閉包概念簡單解析(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
javascript 獲取網(wǎng)頁參數(shù)系統(tǒng)
用處比較多，適合在當(dāng)前網(wǎng)頁打開別的網(wǎng)站的內(nèi)容
2008-07-07