[Vue3 + TS + Vite] 获取网页选中内容的字符串格式或HTML格式

发布于:2024-07-09 ⋅ 阅读:(139) ⋅ 点赞:(0)

获取网页选中内容的字符串格式

let selected_text_by_mouse: any

// 获取选中的文字
const mouse_selected_text=(event:MouseEvent)=>{
  const selection = window.getSelection();
  if(selection && selection.rangeCount > 0){
    const content = selection.toString();
    selected_text_by_mouse = content
  }
  else{
    selected_text_by_mouse=""
  }
}

获取网页选中内容的HTML格式
(无法获取选中文字最外面的HTML标签)
例如:

<p><span>段文</span></p>

选中“一段文字”之后,得到的是:

<span>段文</span>

而不是:

<p><span>段文</span></p>
let selected_text_by_mouse: any

// 获取选中的文字
const mouse_selected_text=(event:MouseEvent)=>{
  const selection = window.getSelection();
  if(selection && selection.rangeCount > 0){
    const range = selection.getRangeAt(0)
    const clonedFragment = range.cloneContents()
    // 创建一个临时容器以容纳克隆的片段
    const innerTmpContainer = document.createElement('div')
    innerTmpContainer.appendChild(clonedFragment)
    // 现在outerTmpContainer不再包含最外层的div,而是直接包含了div的内容
    const contentHtmlString = innerTmpContainer.innerHTML
    // 清除临时容器(可选)
    innerTmpContainer.remove()

    const content = contentHtmlString
    selected_text_by_mouse = content
  }
  else{
    selected_text_by_mouse=""
  }
}

网站公告

今日签到

点亮在社区的每一天
去签到