【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)
相关推荐
gqkmiss25 分钟前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃31 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰35 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye41 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm44 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x1 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
花海少爷1 小时前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You2 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js