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

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

  • 需求

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

  • 效果说明

选中绿色框内文字,将黄色框内文字作为上下文传递

  • 代码实现utils.js
js 复制代码
/**
 * 通过焦点元素获取所属标签
 */
export const getElementByRange = range => {
  let element = range.commonAncestorContainer
  while (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.previousElementSibling
  const text2 = getTextContentByElement(dom2)
  let text1 = ''
  if (dom2) {
    const dom1 = dom2.previousElementSibling
    text1 = getTextContentByElement(dom1)
  }
  // 向下取两个元素
  const dom4 = dom3.nextElementSibling
  const text4 = getTextContentByElement(dom4)
  let text5 = ''
  if (dom4) {
    const dom5 = dom4.nextElementSibling
    text5 = getTextContentByElement(dom5)
  }
  let text3 = getTextContentByElement(dom3)
  // 向前拼两段
  if (text2) text3 = text2 + '\n' + text3
  if (text1) text3 = text1 + '\n' + text3
  // 向后拼两端
  if (text4) text3 = text3 + '\n' + text4
  if (text5) text3 = text3 + '\n' + text5
  return text3
}
  • 外部调用

方法从上面的utils引入

js 复制代码
import {
  getContextByRange // 通过焦点获取上下文
} from './utils'

const selection = document.getSelection()
const oRange = selection?.getRangeAt(0)
// 上下文
const context = getContextByRange(oRange)
相关推荐
待磨的钝刨38 分钟前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
逐·風4 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫4 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦5 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山6 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享6 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄7 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf8 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨8 小时前
VUE+Vite之环境文件配置及使用环境变量
前端