【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)
相关推荐
章丸丸几秒前
Tube - Studio Videos
前端·后端
因吹斯汀1 小时前
一饭封神:当AI厨神遇上你的冰箱,八大菜系大师在线battle!
前端·vue.js·ai编程
再学一点就睡1 小时前
NATAPP 内网穿透指南:让本地项目轻松 “走出去”
前端
拜无忧1 小时前
2025最新React项目架构指南:从零到一,为前端小白打造
前端·react.js·typescript
稻草人不怕疼1 小时前
记一次从“按钮点不动”到“窗口派发缺失”的排查过程
前端
irving同学462381 小时前
TypeORM 列装饰器完整总结
前端·后端·nestjs
彭于晏爱编程1 小时前
你真的了解 Map、Set 嘛
前端
崔璨1 小时前
详解Vue3的响应式系统
前端·vue.js
摸鱼的鱼lv1 小时前
🔥 Vue.js组件通信全攻略:从父子传值到全局状态管理,一篇搞定所有场景!🚀
前端·vue.js
IT_陈寒2 小时前
Java性能优化:10个让你的Spring Boot应用提速300%的隐藏技巧
前端·人工智能·后端