2. 程式人生 > 其它 >用js的getSelection()實現型別電子書閱讀器的劃詞文字高亮選中功能

用js的getSelection()實現型別電子書閱讀器的劃詞文字高亮選中功能

阿新 • • 發佈：2021-01-16

技術標籤：js

這裡只是一個demo幫助理解文字高亮選中的實現原理，還有多段選中，重複選中等功能沒有實現，如果想用現成的產品可以參考一位大佬的部落格https://segmentfault.com/a/1190000018981813
在這裡插入圖片描述

<!DOCTYPE html>
<html lang="cmn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"
 
 />
    <title>Document</title>
    <style>
      #app {
        position: relative;
      }
      .red {
        border-bottom: 2px solid red;
      }
      .box {
        position: absolute;
        left: 0;
        top: 0;
        width: 150px;
        height: 50px;
        background
 
: pink;
      }
      .green {
        border-bottom: 2px solid green;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <p>
        這是一段文字要實現選中高亮這是一段文字要實現選中高亮這是一段文字要實現選中高亮這是一段文字要實現選中高亮
        這是一段文字要實現選中高亮這是一段文字要實現選中高亮這是一段文字要實現選中高亮這是一段文字要實現選中高亮
        這是一段文字要實現選中高亮這是一段文字要實現選中高亮這是一段文字要實現選中高亮
        這是一段文字要實現選中高亮這是一段文字要實現選中高亮這是一段文字要實現選中高亮
        這是一段文字要實現選中高亮這是一段文字要實現選中高亮
        這是一段文字要實現選中高亮這是一段文字要實現選中高亮這是一段文字要實現選中高亮這是一段文字要實現選中高亮
      </
 
p>
      <div class="box" v-show="showBox" :style="styleBox">
        <button @click="createSpan('red')">紅線</button>
        <button @click="createSpan('green')">綠線</button>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            showBox: false,
            styleBox: {
              left: 0,
              top: 0
            },
            selectNode: null
          };
        },
        created() {
          this.init();
        },
        methods: {
          init() {
            const that = this;
            document.addEventListener("mouseup", function (e) {
              if (window.getSelection().rangeCount === 0 || that.showBox) {
                return false;
              }

              // 獲取選中
              const range = window.getSelection().getRangeAt(0);
              const comNode = range.commonAncestorContainer;
              const start = {
                node: range.startContainer,
                offset: range.startOffset
              };
              const end = {
                node: range.startContainer,
                offset: range.endOffset
              };
              // 最簡單的一種情況一行選中
              if (start.offset !== end.offset) {
                // 以開始選中位置切割一分為2的後半部分
                const lastText = start.node.splitText(start.offset);
                // 以後半部分按照開始選中到結束選中的偏移量切割，並選擇前一部分
                const selected = lastText.splitText(end.offset - start.offset)
                  .previousSibling;
                that.selectedNode = selected;
                that.styleBox = {
                  left: e.clientX - 16 + "px",
                  top: e.clientY + "px"
                };
                that.showBox = true;
              }
            });
          },
          createSpan(color) {
            // 建立一個span來包裹，並新增樣式
            const span = document.createElement("span");
            span.setAttribute("class", color);
            span.appendChild(this.selectedNode.cloneNode(false));
            this.selectedNode.parentNode.replaceChild(span, this.selectedNode);
            this.showBox = false;
          }
        }
      });
    </script>
  </body>
</html>

相關推薦

用js的getSelection()實現型別電子書閱讀器的劃詞文字高亮選中功能

技術標籤：js 這裡只是一個demo幫助理解文字高亮選中的實現原理，還有多段選中，重複選中等功能沒有實現，如果想用現成的產品可以參考一位大佬的部落格https://segmentfault.com/a/1190000018981813

還在用別的小說閱讀器？今天教你用Python製作簡易小說閱讀器！

本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯絡我們以作處理

掌閱釋出 iReader Light 2 Pro、Smart 2/X2 三款電子書閱讀器，928 起

10 月 21 日訊息，掌閱於 10 月 20 日舉辦了 iReader 2021 閱見極致新品釋出會，正式釋出了iReader Light 2 Pro、iReaderSmart 2、iReaderSmart X2系列電紙書閱讀器。新款產品螢幕面積更大，均採用暗灰色的外殼，同

京東 Kindle 自營店突現大面積無貨，僅剩一款青春版電子書閱讀器在售賣

感謝網友 菜狗 的線索投遞！

用goalng實現ascii、UCS2、UTF-8文字字串的解碼與編碼

技術標籤：golanggo字串 用goalng實現ANSI、UCS2、UTF-8文字字串的解碼與編碼 用到的外部包：

Echarts 實現 hover 狀態下，座標軸文字高亮

技術標籤：資料視覺化echartsjs 一、需求說明 Echarts 圖中的柱狀圖和座標文字皆可點選觸發相對應的事件，希望使用者滑鼠 hover 狀態有顏色高亮的效果。如圖：二、實現思路

直播商城原始碼，實現商城客服聊天，傳送文字、圖片的功能

  1.實現的思路 由於之前寫python的時候接觸過websocket,但是當時是使用類似於廣播的機制的,沒有做過一對一的聊天.但是既然知道了廣播,那一對一也就不是什麼難事了

用 Java 實現一個簡單的虛擬機器器 ?

Learning By Doing. 最近開了個新坑,目的是用 Java 8 實現一個簡單的解釋型 JVM. 目前零零散散提交了 100 多 commits. 最終的目標是 自舉.

請用python實現函式func，當引數型別為list時，返回list中所有數字型別元素的和，當引數型別為tuple時，返回tuple中所有數字型別元素的乘積。

1.題目要求： 請實現函式func，當引數型別為list時，返回list中所有數字型別元素的和，

python 資料描述器實現型別檢查

　　 class Genre: def __init__(self,title,mold): self.title=title self.mold=mold def __get__(self,instance,owner):

C#用DesignSurface實現一個簡單的窗體設計器

　　System.ComponentModel.Design.DesignSurface是為設計元件提供一個使用者介面，通過它可以實現一個簡單的窗體設計器。

使用python程式碼實現 PDF 閱讀器

本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯絡我們以作處理

用Javascript實現點選input輸入框後輸入框的提示文字消失,並且邊框顏色發生變化（包含input框的password型別如何顯示提示文字）

技術標籤：JScsshtmljavascript 用Javascript實現點選input輸入框後輸入框的提示文字消失。並且邊框顏色發生變化（包含input框的password型別如何顯示提示文字）

@Scheduled & @EnableScheduling：定時器核心註解，用來實現定時器功能

spring中 @Scheduled & @EnableScheduling 這2個註解，可以用來快速開發定時器，使用特別的簡單。

你現在用什麼在閱讀？紙質書還是電子小說呢？BookReader For Mac頂級電子書閱讀工具

BookReader破解版 for mac(mac看書神器) 那你現在用什麼在閱讀？紙質書還是電子小說呢？BookReader For Mac是頂級的電子書閱讀工具，支援的格式：EPUB，MOBI，PRC，AZW，FB2，PDF，Microsoft DOC等。看到這個工具我

用python實現決策樹ID3演算法，對隱形眼鏡型別預測

本節講解如何預測患者需要佩戴的隱形眼鏡型別。 1、使用決策樹預測隱形眼鏡型別的一般流程

OpenGL學習（十一）-- 用 GLSL 實現載入圖片

我的 OpenGL 專題學習目錄，希望和大家一起學習交流進步！ OpenGL學習（一）-- 術語瞭解

什麼鬼，面試官竟然讓我用Redis實現一個訊息佇列？

[ 轉載 ]原文連結：blog.csdn.net/yelvgou9995… 眾所周知，redis是一個高效能的分散式key-value儲存系統，在NoSQL資料庫市場上，redis自己就佔據了將近半壁江山，足以見到其強大之處。同時，由於redis的單執行緒特性

手把手教你用 Node 實現 HTTP 協議（三）

手把手教你用 Node 實現 HTTP 協議（三） 上一章介紹瞭如何解析 HTTP 請求報文，這一章我們來講解如何進行報文的收發和 TCP 連線的建立。

Java 用註解實現通用功能-csv檔案的讀取為例

引言 使用java註解可以實現一些共通的功能，假設有幾種格式的csv檔案，編碼，分隔符，頭部行數之類的定義各不相同，但我們想統一的處理他們，那就需要一個共通的方法。