javascript - 如何使用 contenteditable 获取 div 元素内标记文本的父元素？

Question

每次我尝试时，它都会给我一个 p 标签，即使母鹿的父级应该是 span

var sel = window.getSelection();
console.log(sel.getRangeAt(0));

是否有任何解决方案或方法可以做到这一点，或者有一些有用信息的链接如何做到这一点？

Answer 1

使用范围属性startContainer , endContainer和 commonAncestorContainer确定包含元素的选择。在以下示例中，选择文本“bbb”并按按钮“press me”。正如预期的那样，commonAncestorContainer 是 span 元素:

$('#pressme').click(function(){
  var rng = window.getSelection().getRangeAt(0);
  alert(rng.commonAncestorContainer.parentNode.tagName);
});

#editor {
  width: 500px;
  height: 400px;
  padding: 4px;
  border: solid 1px gray;
  margin-bottom: 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='editor' contenteditable='true'>aaa <span style="color:red">bbb</span> ccc</div>
<input id='pressme' type='button' value='press me' />

尝试选择文本的各个部分，看看它如何改变结果。