【HTML】通过焦点,获取部分上下文内容

【HTML】通过焦点,获取部分上下文内容

  • 需求

用户从页面中选择部分文字描述,获取这段选中文字,并获取该文字、上两段、下两段内容,作为上下文输入

  • 效果说明

选中绿色框内文字,将黄色框内文字作为上下文传递
在这里插入图片描述

  • 代码实现utils.js
/*** 通过焦点元素获取所属标签*/
export const getElementByRange = range => {let element = range.commonAncestorContainerwhile (element.nodeType !== 1) {element = element.parentNode}return element
}/*** 通过标签获取内容*/
export const getTextContentByElement = element => {return element ? element.textContent : null
}/*** 通过焦点获取上下文* @param {Range} range 焦点* @returns 上下文内容*/
export const getContextByRange = range => {const dom3 = getElementByRange(range)// 向上取两个元素const dom2 = dom3.previousElementSiblingconst text2 = getTextContentByElement(dom2)let text1 = ''if (dom2) {const dom1 = dom2.previousElementSiblingtext1 = getTextContentByElement(dom1)}// 向下取两个元素const dom4 = dom3.nextElementSiblingconst text4 = getTextContentByElement(dom4)let text5 = ''if (dom4) {const dom5 = dom4.nextElementSiblingtext5 = getTextContentByElement(dom5)}let text3 = getTextContentByElement(dom3)// 向前拼两段if (text2) text3 = text2 + '\n' + text3if (text1) text3 = text1 + '\n' + text3// 向后拼两端if (text4) text3 = text3 + '\n' + text4if (text5) text3 = text3 + '\n' + text5return text3
}
  • 外部调用

方法从上面的utils引入

import {getContextByRange // 通过焦点获取上下文
} from './utils'const selection = document.getSelection()
const oRange = selection?.getRangeAt(0)
// 上下文
const context = getContextByRange(oRange)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/336808.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网络安全岗秋招面试题及面试经验分享

Hello,各位小伙伴,我作为一名网络安全工程师曾经在秋招中斩获🔟个offer🌼,并在国内知名互联网公司任职过的职场老油条,希望可以将我的面试的网络安全大厂面试题和好运分享给大家~ 转眼2024年秋招又快到了金…

【传知代码】MonoCon解读与复现(论文复现)

前言:在快速发展的计算机视觉领域,单目视觉(Monocular Vision)技术凭借其独特的优势和广泛的应用前景,逐渐成为了研究的热点。MonoCon作为单目视觉领域的一项重要技术,其独特的算法设计和高效的性能表现&am…

《Kubernetes部署篇:基于麒麟V10+ARM64架构部署harbor v2.4.0镜像仓库》

总结:整理不易,如果对你有帮助,可否点赞关注一下? 更多详细内容请参考:企业级K8s集群运维实战 一、环境信息 K8S版本 操作系统 CPU架构 服务版本 1.26.15 Kylin Linux Advanced Server V10 ARM64 harbor v2.4.0 二、部…

Python爬虫实战(实战篇)—16获取【百度热搜】数据—写入Ecel(附完整代码)

文章目录 专栏导读背景结果预览1、爬取页面分析2、通过返回数据发现适合利用lxmlxpath3、继续分析【小说榜、电影榜、电视剧榜、汽车榜、游戏榜】4、完整代码总结 专栏导读 🔥🔥本文已收录于《Python基础篇爬虫》 🉑🉑本专栏专门…

windows 执行node报错 800A1391

在项目下执行node -v的时候,抛了这个错误,一开始没发现有啥问题 现在一看,这个报错里的node怎么是个文件... 出现这个问题,是因为项目下,有个同名的文件叫node.js,搞得windows一时不知道是想打开node.js文…

基于 React + Nest 全栈开发的后台系统

Xmw Admin 基于 React Nest 全栈开发的后台系统 🪴 项目简介 🎯 前端技术栈: React、Ant Design、Umi、TypeScript🎯 后端技术栈: Nest.js、Sequelize、Redis、Mysql😝 线上预览: https://r…

爱堡集团数智掘金—共绘上市蓝图

(本台记者报)2024年5月26日爱堡集团在浙江省杭州市上城区瑞莱克斯大酒店隆重召开规模达500人的盛会。这场聚焦智慧与创新的会议,旨在加速爱堡集团的数智化转型进程,并为其上市之路绘制蓝图,吸引了众多行业领袖和媒体的…

Claude 3可使用第三方API,实现业务流程自动化

5月31日,著名大模型平台Anthropic宣布,Claude3模型可以使用第三方API和工具。 这也就是说,用户通过文本提问的方式就能让Claude自动执行多种任务,例如,从发票中自动提取姓名、日期、金额等,该功能对于开发…

做外贸,怎么选国外服务器?

不管是新手还是外贸老司机,大家都知道要用海外服务器来做外贸网站,无论外贸独立站的客户是欧美、东南亚、还是非洲,都不能选择国内机房的服务器,必须选择海外服务器,这是共识。 但是今天,我要告诉大家一个…

过敏者的福音:猫毛克星大揭秘!使用宠物空气净化器效果如何?

对于猫毛过敏者来说,家中爱宠的陪伴与过敏的困扰并存,给他们的日常生活带来了极大的不便。猫毛过敏者常常因为与猫咪接触后出现打喷嚏、鼻塞、眼睛发痒等症状而苦恼,严重时甚至可能影响到他们的呼吸健康。 然而,这并不意味着猫毛…

Windows系统安装openvino(2024.1.0)

一、openvino下载: 下载地址:下载英特尔发行版 OpenVINO 工具套件 (intel.cn) 下载完之后将压缩包解压,然后重命名文件夹为openvino_2024.1.0。 二、环境配置 以python环境为例:(建议使用moniconda虚拟环境来安装&am…

【python】OpenCV—Color Detection

学习来自 如何使用 OpenCV Python 检测颜色 import cv2 import numpy as npdef red_hsv(img, saveFalse):lower_hsv1 np.array([0, 175, 20])higher_hsv1 np.array([10, 255, 255])lower_hsv2 np.array([170, 175, 20])higer_hsv2 np.array([10, 255, 255])mask1 cv2.inR…

STM32--ADC

一、简介 *ADC(Analog-Digital Converter)模拟-数字转换器 *ADC可以将引脚上连续变化的模拟电压转换为内存中存储的数字变量,建立模拟电路到数字电路的桥梁 *12位逐次逼近型ADC,1us转换时间 *输入电压范围:0~3.3V&…

鸿蒙ArkTS声明式开发:跨平台支持列表【背景设置】 通用属性

背景设置 设置组件的背景样式。 说明: 开发前请熟悉鸿蒙开发指导文档: gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版…

备份数据怎么恢复?从入门到精通,2个技巧读懂!

在数字时代,数据的重要性不言而喻。无论是个人还是企业,数据都是我们生活和工作的核心,但由于各种原因,数据丢失的情况时有发生。为了应对这种情况,备份数据成为了一个必要的措施。可当数据真的丢失时,备份…

3D工业视觉

前言 本文主要介绍3D视觉技术、工业领域的应用、市场格局等,主要技术包括激光三角测量、结构光、ToF、立体视觉。 一、核心内容 3D视觉技术满足工业领域更高精度、更高速度、更柔性化的需求,扩大工业自动化的场景。 2D视觉技术基于物体平面轮廓&#…

CentOS 7基础操作01_安装CentOS 7操作系统

1、实验环境 因为 Windows图形界面占用系统资源较高,所以公司准备将面向互联网的网站,数据库等重要应用基于Linux平台部署,并计划于近期将服务器安装开源免费的 CentOS 系统。进行前期准备工作时,需要公司的系统管理员尽快掌握 CentOS 系统的安装过程 2、需要描述 …

《QT实用小工具·六十九》基于QT开发的五子棋AI游戏

1、概述 源码放在文章末尾 该项目实现了五子棋对战AI,可以享受和AI下棋的快乐,项目实现思路如下: 博弈树 ●Alpha-Beta剪枝(性能提高较大) ●启发式搜索(性能提高较大) ●落子区域限制(性能提高较大) ●Zobrist哈希(性能小幅提升) ●Qt…

能拖拽生成几个图表,就叫BI,就叫低代码,顶多算个报表工具

一、什么是BI BI(Business Intelligence)是指通过数据分析和可视化工具来帮助企业做出决策的过程和技术。它远远不止于简单的拖拽生成图表,而是通过对数据的深入分析和挖掘,提供更全面、准确的信息支持。 BI(Business…

RxSwift - 实现一个MVVM架构的TableView

文章目录 RxSwift - 实现一个MVVM架构的TableView前沿MVVM架构的Tableview目录结构1、模型(Model)2、视图模型(ViewModel)3、视图(View) 界面效果 RxSwift - 实现一个MVVM架构的TableView 前沿 MVVM架构在…