document.getSelection 在选择中带有回车

Question

I've tried many different things and am at a loss. The code below illustrates the issue. I have an editable element.

If I select a paragraph of text, the Selection.anchorNode is a #text node.

If when selecting a paragraph I include a carriage return preceding the paragraph, Selection.anchorNode is instead the containing span element.

What I need to know is what the offset is from the start of the span element's innerText value. When a carriage return IS NOT included in the selection, I am able simply to analyze the sibling nodes of the anchorNode. But when a carriage return IS included in the selection, I don't seem to have the information to achieve this.

Any guidance as to what I am missing would be appreciated.

 function showResult() { let sel = document.getSelection(); document.getElementById("output").textContent ="document.getSelection().anchorNode.nodeName: " + sel.anchorNode.nodeName; } document.getElementById("textContainer").innerText = "This is the first paragraph\\n\\nSelecting this paragraph with and without the preceding carriage return yields very different anchorNodes";

 #textContainer { position: relative; display: inline-block; width: 400px; height: 100px; border: 1px solid steelblue; margin: 5px; } #output { position: relative; width: 400px; height: 100px; border: 1px solid steelblue; margin: 5px; }

 <div> <span id="textContainer" contenteditable="true"></span> </div> <input type="button" onclick="showResult()" value="Write selection object to console" /> <div id="output"> </div>

Answer 1

It seems browser return parent node while selecting carriage return so you can use if condition for this situation:

sel.anchorNode.hasChildNodes()?sel.anchorNode.childNodes[0].nodeName:sel.anchorNode.nodeName

 function showResult() { let sel = document.getSelection(); document.getElementById("output").textContent ="document.getSelection().anchorNode.nodeName: " + (sel.anchorNode.hasChildNodes()?sel.anchorNode.childNodes[0].nodeName:sel.anchorNode.nodeName); } document.getElementById("textContainer").innerText = "This is the first paragraph\\n\\nSelecting this paragraph with and without the preceding carriage return yields very different anchorNodes";

 #textContainer { position: relative; display: inline-block; width: 400px; height: 100px; border: 1px solid steelblue; margin: 5px; } #output { position: relative; width: 400px; height: 100px; border: 1px solid steelblue; margin: 5px; }

 <div> <span id="textContainer" contenteditable="true"></span> </div> <input type="button" onclick="showResult()" value="Write selection object to console" /> <div id="output"> </div>