时间戳

首页 > 解决方案 > 选择所有跨区文本时如何获取元素？

html - 选择所有跨区文本时如何获取元素？

问题描述

在内容可编辑的 div 中，我想用 包围所选文本<span>，或者在选择其中的所有文本时修改现有<span>文本。我可以做第一个，但不能做第二个。

在第二种情况下，如果我A<span>B</span>C选择了 B，则选择显示anchorNodeas A、focusNodeasC和toString()return B。父节点是封闭段落，而不是<span>. 我找不到任何方法来区分选择BinA<span>B</span>C和 in ABC，因为我找不到任何方法来发现在第一种情况下<span>包围的元素的存在。B肯定有办法做到这一点，对吧？有人可以告诉我该怎么做吗？

这是代码：

var sel = window.getSelection();
var range = sel.getRangeAt(0);
var selected = range.compareBoundaryPoints(range.START_TO_END, range);
if (selected > 0) {    // some text is selected
  var el = range.commonAncestorContainer;
  //
  // would expect to find el == <span> if selection is B
  // in <p>A<span>B</span>C<p>, but find <p> instead!
  //
  //... code to surround selection with new span or to process
  //    existing span... but there is never an existing span!
}

标签： htmlcontenteditable

解决方案

Range.commonAncestorContainer有一个名为parentElement的属性。它是所选文本的父级。

在代码片段中，伦敦和巴黎都被一个span元素包裹。

const text = "<p>Hello from <span>London</span> and <span>Paris</span></p>"
const parser = new DOMParser();
const html = parser.parseFromString(text, "text/html").body.innerHTML
const editor = document.querySelector('div[contenteditable]')
editor.innerHTML = html


function getParent() {
  var selection = window.getSelection();
  if (selection.rangeCount) {
    const range = selection.getRangeAt(0);
    const parent = range.commonAncestorContainer.parentElement;

    document.querySelector("#result").innerText = parent instanceof HTMLSpanElement
    if (parent instanceof HTMLSpanElement) {
      console.log(parent)
    }
  }
}


document.querySelector("button").onclick = getParent;
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container py-5">
  <div class="row align-items-center">
    <div class="col">
      <div class="w-100 p-5 border" contenteditable>

      </div>
    </div>
    <div class="col">
      <button class="btn btn-primary">Get Text</button>
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      <p>Is Is parent instanceof HTMLSpanElement?  <span id="result"></span> </p>
    </div>
  </div>
</div>

推荐阅读