js实现选择区域添加背景色

用到的基础web API

window.getSelection()

Selection.containsNode()

使用window.getSelection()并不能返回所有选中节点, 通过遍历所有选中节点的最小公共节点下的所有子节点, 并判断遍历到的节点是不是选中的节点, 可以找到所有选中的节点。

Selection.getRangeAt()

Range.commonAncestorContainer

直接遍历document下的所有子节点也可以, 但使用commonAncestorContainer获取所有选中节点的最近公共节点可以缩小遍历范围。

Text.splitText()

选择的开头和结尾部分,可能是半个单词, 即半个文本节点, 需要使用splitText将文本节点切割

源码实现

js 复制代码
import { v4 as uuidV4 } from 'uuid';

// 获取指定节点下的所有子节点
export function getAllNodes(rootNode, callback) {
  if (!callback) {
    var nodes = [];
    getAllNodes(rootNode, function (node) {
      nodes.push(node);
    });
    return nodes;
  }

  if (false === callback(rootNode)) return false;

  if (rootNode.hasChildNodes()) {
    let nodes = rootNode.childNodes;
    for (var i = 0, l = nodes.length; i < l; ++i)
      if (false === getAllNodes(nodes[i], callback)) return;
  }
}
// 监听mouseup事件
export function listenMouseUp() {
  document.addEventListener('mouseup', listenMouseUpCallback);
}

// 移除mouseup事件
export function removeListenMouseUp() {
  document.removeEventListener('mouseup', listenMouseUpCallback);
}

// mouseup事件的回调函数
function listenMouseUpCallback() {
  const selected = window.getSelection();
  const range = selected.getRangeAt(0);
  // range.insertNode(newNode()); // 在Range开头插入一个节点, 这是另外一种分隔方式
  const startContainer = range.startContainer;
  const startOffset = range.startOffset;
  startContainer.splitText(startOffset); // 将选中范围的结束位置处的文本节点分隔为两个节点

  const endContainer = range.endContainer;
  const endOffset = range.endOffset;
  endContainer.splitText(endOffset);

  const nodes = getAllNodes(range.commonAncestorContainer);
  let uuid = uuidV4();
  for (let i = 0; i < nodes.length; i++) {
    const node = nodes[i];
    if (selected.containsNode(node)) {
      addClass(node, uuid);
    }
  }
}

// 给选择区域增加背景色
function addClass(node, uuid) {
  if (node.nodeType === 3) {
    // 将文本节点外面加一层<span class="light-hight"></span>
    let newNode = document.createElement('span'); // 创建一个新的element节点
    newNode.classList.add('light-hight');
    newNode.classList.add('new-span');
    newNode.setAttribute('data-mark-id', uuid);
    node.parentNode.insertBefore(newNode, node); // 将新的节点插入到文本节点前
    newNode.appendChild(node); // 将文本节点移动到新的节点里面
  } else {
    node.classList.add('light-hight');
    node.setAttribute('data-mark-id', uuid);
  }
}
相关推荐
RadiumAg1 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo1 小时前
ES6笔记2
开发语言·前端·javascript
yanlele1 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
烛阴3 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
初遇你时动了情3 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
dssxyz3 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
ohMyGod_1236 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
@大迁世界6 小时前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
一瓣橙子6 小时前
7.7日 实验03-Spark批处理开发(2)
开发语言·javascript·ajax
Hilaku6 小时前
从一个实战项目,看懂 `new DataTransfer()` 的三大妙用
前端·javascript·jquery