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

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

  • 需求

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

  • 效果说明

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

  • 代码实现utils.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引入

import {
  getContextByRange // 通过焦点获取上下文
} from './utils'

const selection = document.getSelection()
const oRange = selection?.getRangeAt(0)
// 上下文
const context = getContextByRange(oRange)
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CompletableFuture是Java中用于处理异步任务的类,它提供了一种方便的方式来获取异步任务的结果。在获取request上下文时,可以通过以下步骤进行操作: 1. 在异步任务开始前,使用`CompletableFuture.supplyAsync`方法创建一个CompletableFuture对象,并将需要执行的任务包装在其中。 2. 在任务执行的过程中,可以使用`CompletableFuture.completedFuture`方法获取当前线程的上下文信息,并将其存储在一个变量中。 3. 在任务执行结束后,可以使用`CompletableFuture.thenApply`方法来处理任务的结果。在这个方法中,可以通过之前存储的上下文变量来获取request上下文。 下面是一个示例代码,演示了如何使用CompletableFuture获取request上下文: ```java import java.util.concurrent.CompletableFuture; import javax.servlet.AsyncContext; public class MyAsyncTask { public CompletableFuture<String> performTask(AsyncContext asyncContext) { // 获取当前线程的上下文信息 String requestContext = getRequestContext(); // 创建CompletableFuture对象并执行异步任务 return CompletableFuture.supplyAsync(() -> { // 执行任务,可以在这里使用requestContext // 模拟异步任务执行过程 try { Thread.sleep(1000); } catch (InterruptedException e) { e.printStackTrace(); } // 返回任务结果 return "Task completed"; }).thenApply(result -> { // 在任务完成后处理结果 // 可以在这里使用requestContext // 结束异步请求 asyncContext.complete(); // 返回最终结果 return result; }); } private String getRequestContext() { // 获取request上下文的方法实现 // 这里可以根据具体的框架或需求来获取request上下文 return "Request context"; } } ``` 使用上述示例代码,您可以在异步任务中获取并使用request上下文信息。注意,这只是一种示例方式,具体的实现可能因框架和需求而有所不同。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值