获取范围的开始和结束偏移量相对于其父容器的值假设我有这个HTML元素：<div id="parent">
Hello everyone! <a>This is my home page</a>
<p>Bye!</p></div>用户用鼠标选择“家”。我想知道有多少个字符#parent他的选择开始(从结尾有多少个字符)#parent他的选择结束)。即使他选择了一个HTML标记，这也是可行的。(我需要它在所有浏览器中工作)range.startOffset看起来很有希望，但它是一个相对于范围的直接容器的偏移量，并且只有当容器是文本节点时才是字符偏移。
3 回答
慕姐4208626
TA贡献1852条经验 获得超7个赞
caretOffset
if (typeof window.getSelection != "undefined") {
var range = window.getSelection().getRangeAt(0);
var selected = range.toString().length; // *
var preCaretRange = range.cloneRange();
preCaretRange.selectNodeContents(element);
preCaretRange.setEnd(range.endContainer, range.endOffset);
if(selected){ // *
caretOffset = preCaretRange.toString().length - selected; // *
} else { // *
caretOffset = preCaretRange.toString().length;
} // *}
繁华开满天机
TA贡献1816条经验 获得超4个赞
selectNodeContents()<br>nodecontenteditable
var editor = null;var output = null;const getTextSelection = function (editor) {
const selection = window.getSelection();
if (selection != null && selection.rangeCount > 0) {
const range = selection.getRangeAt(0);
return {
start: getTextLength(editor, range.startContainer, range.startOffset),
end: getTextLength(editor, range.endContainer, range.endOffset)
};
} else
return null;}const getTextLength = function (parent, node, offset) {
var textLength = 0;
if (node.nodeName == '#text')
textLength += offset;
else for (var i = 0; i < offset; i++)
textLength += getNodeTextLength(node.childNodes[i]);
if (node != parent)
textLength += getTextLength(parent, node.parentNode, getNodeOffset(node));
return textLength;}const getNodeTextLength = function (node) {
var textLength = 0;
if (node.nodeName == 'BR')
textLength = 1;
else if (node.nodeName == '#text')
textLength = node.nodeValue.length;
else if (node.childNodes != null)
for (var i = 0; i < node.childNodes.length; i++)
textLength += getNodeTextLength(node.childNodes[i]);
return textLength;}const getNodeOffset = function (node) {
return node == null ? -1 : 1 + getNodeOffset(node.previousSibling);}window.onload = function () {
editor = document.querySelector('.editor');
output = document.querySelector('#output');
document.addEventListener('selectionchange', handleSelectionChange);}const handleSelectionChange = function () {
if (isEditor(document.activeElement)) {
const textSelection = getTextSelection(document.activeElement);
if (textSelection != null) {
const text = document.activeElement.innerText;
const selection = text.slice(textSelection.start, textSelection.end);
print(`Selection: [${selection}] (Start: ${textSelection.start}, End: ${textSelection.end})`);
} else
print('Selection is null!');
} else
print('Select some text above');}const isEditor = function (element) {
return element != null && element.classList.contains('editor');}const print = function (message) {
if (output != null)
output.innerText = message;
else
console.log('output is null!');}* {
font-family: 'Georgia', sans-serif;
padding: 0;
margin: 0;}body {
margin: 16px;}.p {
font-size: 16px;
line-height: 24px;
padding: 0 2px;}.editor {
border: 1px solid #0000001e;
border-radius: 2px;
white-space: pre-wrap;}#output {
margin-top: 16px;}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./script.js" async></script> <link href="./stylesheet.css" rel="stylesheet"> <title>Caret Position</title></head><body> <p class="editor" contenteditable="true"><em>Write<br></em><br>some <br>awesome <b><em>text </em></b>here...</p> <p id="output">Select some text above</p></body></html>
添加回答
举报
0/150
提交
取消