JS-如何獲取節點開頭和當前插入符號（文本光標）位置之間的文本？

Question

我需要獲取一個節點的文本（或整個內部html），在contenteditable設置為true的元素中的當前插入符號（文本光標）位置處被截斷。 我試過使用range.setStart（）等，但是我不能做它的正面和反面...

編輯：為澄清起見，在發生某些事件時，我希望腳本從當前具有焦點的節點的開頭提取文本到插入符號的位置（如果可編輯字段具有焦點，當前閃爍的垂直線就是該文本）並將其存儲在變量中。 類似於用戶按下ctrl + shift + home和ctrl + c時將發生的操作

示例：給定html：

<span contenteditable=true>Hello, world<br> Good bye, World</span>

並假設插入符號介於“好”和“再見”之間，我想檢索

"Hello, world<br> Good"

Answer 1

您可以使用Rangy和jQuery輕松完成此操作。

這是一個展示這種方法的jsFiddle 。 這些評論解釋了正在發生的事情。

$("contenteditable-element").click(function () {
    // Get the current selection with Rangy
    var sel = rangy.getSelection()
    // Insert a temporary caret element at the caret position 
    // (which is inside the contenteditable element)
    if (sel.rangeCount) sel.getRangeAt(0).insertNode($("<caret />")[0]);
    // Read the html inside the contenteditable element
    var innerHTML = $("contenteditable-element").html();
    // Clean up, get rid of the caret element
    $("caret").remove();
    // Only keep the text before the first occurrence of the caret element
    innerHTML = innerHTML.substr(0, innerHTML.indexOf('<caret>'));
});

Answer 2

我建議采用以下方法：

創建一個包含所需內容的范圍
調用范圍的cloneContents()方法以獲得表示范圍內容的DocumentFragment
創建一個<div>或<body>元素並將片段附加到該元素
獲取元素的innerHTML

示例： http ： //jsfiddle.net/sUSYG/

碼：

function getHtmlPrecedingSelectionIn(container) {
    var html = "";
    if (window.getSelection && document.createRange) {
        var sel = window.getSelection();
        if (sel.rangeCount > 0) {
            var selRange = sel.getRangeAt(0);
            var range = document.createRange();
            range.selectNodeContents(container);
            range.setEnd(selRange.startContainer, selRange.startOffset);

            var frag = range.cloneContents();
            var el = document.createElement("body");
            el.appendChild(frag);
            html = el.innerHTML;
        }
    }
    return html;
}

注意事項：

這在IE <= 8中將不起作用，盡管很難做到（通過使用其不同選擇/范圍API進行編碼或使用Rangy之類的庫進行編碼）
不能保證生成的HTML是可編輯跨度的原始HTML的子字符串。

Answer 3

也許這會將您推向正確的方向：獲取范圍相對於其父容器的開始和結束偏移量

我構建了一個小提琴，該小提琴顯示了與您的示例一起使用的功能： http : //jsfiddle.net/Kn8qr/2/

function getCaret(element) {
var caretOffset = 0;
if (typeof window.getSelection != "undefined") {
    var range = window.getSelection().getRangeAt(0);
    var preCaretRange = range.cloneRange();
    preCaretRange.selectNodeContents(element);
    preCaretRange.setEnd(range.endContainer, range.endOffset);
    caretOffset = preCaretRange.toString().length;
} else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
    var textRange = document.selection.createRange();
    var preCaretTextRange = document.body.createTextRange();
    preCaretTextRange.moveToElementText(element);
    preCaretTextRange.setEndPoint("EndToEnd", textRange);
    caretOffset = preCaretTextRange.text.length;
}
var elCont=element.innerHTML;

var truncCont=elCont.substr(0,caretOffset);

alert(truncCont);
}

這歸功於函數的作者，我只是對其進行了一點編輯。

Answer 4

看一下這個答案： https : //stackoverflow.com/a/16575647/1532004我認為他在做類似的事情。 也許他正在向月球射擊，但是他得到了可行的解決方案:)

JS-如何獲取節點開頭和當前插入符號（文本光標）位置之間的文本？

問題描述

4 個解決方案

解決方案1
6 已采納 2013-05-22 14:11:37

解決方案2
5 2013-05-23 14:28:26

解決方案3
0 2013-05-22 09:43:23

解決方案4
0 2013-05-22 10:11:26

JS-如何獲取節點開頭和當前插入符號（文本光標）位置之間的文本？

問題描述

4 個解決方案

解決方案1 6 已采納 2013-05-22 14:11:37

解決方案2 5 2013-05-23 14:28:26

解決方案3 0 2013-05-22 09:43:23

解決方案4 0 2013-05-22 10:11:26

解決方案1
6 已采納 2013-05-22 14:11:37

解決方案2
5 2013-05-23 14:28:26

解決方案3
0 2013-05-22 09:43:23

解決方案4
0 2013-05-22 10:11:26