[英]window.getSelection().getRange(0) does not work when text is wrapped by <mark>
我正在嘗試使用window.getSelection().getRangeAt(0)來獲取句子中所選單詞的索引。 在沒有任何<mark>和<abbr>的文本中，它可以正常工作。 但是，當句子中有此類標簽時，似乎此功能會將句子切成幾段。
例如，HTML中的一個句子看起來像“ My car <abbr title="car_state"><mark>broke down</mark></abbr>. What do I do? My car <abbr title="car_state"><mark>broke down</mark></abbr>. What do I do?
當我選擇broke down前的文本broke down ，它可以正常工作。 但是，當我在“ e What之后選擇文本時，它將提供startOffset為2而不是22 。
是否可以獲取整個句子的索引？
受Kaiido的答案啟發，以下方法將起作用。 盡管突出顯示的文本不匹配，但是我仍然不需要突出顯示的文本
請隨時添加有關解決方案的評論。
運行示例
$('#selected_text').click(function(){ var text = "My car is broke down. What do I do?"; var range = window.getSelection().getRangeAt(0); var start = range.startOffset; var end = range.endOffset; var extra = 0; var selected_string = range.toString(); var t = $('span').contents(); for(var i = 0; i < t.length; i++){ console.log(extra); if(t[i].wholeText === undefined){ extra += t[i].textContent.length; }else if(t[i].wholeText.includes(selected_string)){ break; }else{ extra += t[i].length; } } start += extra; end += extra; console.log("start index: " + start); console.log("end index: " + end); console.log(text.slice(start, end)); console.log(selected_string); console.log("match: ", (selected_string === text.slice(start, end))); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <body> <span>My car is <abbr title="car_state"><mark>broke down</mark></abbr>. What do <mark>I</mark> d<mark>o</mark>?</span> <button id='selected_text'>show selected text</button> </body> </html>
Range.startOffset只讀屬性返回一個數字，該數字表示Range在startContainer中的起始位置。
和同去與Range.endOffset ，它會返回在endContainer位置。
在頁面中選擇單詞What時， startContainer是在</abbr>之后開始的TextNode。 因此，您得到的索引與此TextNode有關。
如果要獲取選定的文本，則只需調用Selection.toString（）方法。
$('#selected_text').click(function() { var sel = window.getSelection(); var range = sel.getRangeAt(0); var start = range.startOffset; var end = range.endOffset; console.log("start index: " + start); console.log("end index: " + end); console.log('startContainer', range.startContainer.nodeName, range.startContainer.textContent); console.log('endContainer', range.endContainer.nodeName, range.endContainer.textContent); console.log('toString:', sel.toString()); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span>My car is <abbr title="car_state"><mark>broke down</mark></abbr>. What do I do?</span> <button id='selected_text'>show selected text</button>
並且，如果您知道通用容器，並且想知道相對於此祖先文本內容的位置，那么您將不得不遍歷其子節點，直到找到startContainer和endContainer。
var container = $('#container')[0]; $('#selected_text').click(function() { var sel = window.getSelection(); var range = sel.getRangeAt(0); var sel_start = range.startOffset; var sel_end = range.endOffset; var charsBeforeStart = getCharactersCountUntilNode(range.startContainer, container); var charsBeforeEnd = getCharactersCountUntilNode(range.endContainer, container); if(charsBeforeStart < 0 || charsBeforeEnd < 0) { console.warn('out of range'); return; } var start_index = charsBeforeStart + sel_start; var end_index = charsBeforeEnd + sel_end; console.log('start index', start_index); console.log('end index', end_index); console.log(container.textContent.slice(start_index, end_index)); }); function getCharactersCountUntilNode(node, parent) { var walker = document.createTreeWalker( parent || document.body, NodeFilter.SHOW_TEXT, null, false ); var found = false; var chars = 0; while (walker.nextNode()) { if(walker.currentNode === node) { found = true; break; } chars += walker.currentNode.textContent.length; } if(found) { return chars; } else return -1; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span id="container">My car is <abbr title="car_state"><mark>broke down</mark></abbr>. What do I do?</span> <button id='selected_text'>show selected text</button>
Android：window.getSelection（）在Webview中不起作用
[英]Android: window.getSelection() does not work in webview
為什么 someObject = Object.assign({}, someObject, window.getSelection()) 和 {...window.getSelection()} 確實返回空對象？
[英]Why someObject = Object.assign({}, someObject, window.getSelection()) and {...window.getSelection()} does return empty object?
如何讓window.getselection用於輸入type = text字段
[英]How do I get window.getselection to work for an input type=text field
window.getSelection() 給了我選定的文本，但我想要 HTML
[英]window.getSelection() gives me the selected text, but I want the HTML
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.