JS - 如何获取节点开头和当前插入符(文本光标)位置之间的文本？

Question

JS - 如何获取节点开头和当前插入符(文本光标)位置之间的文本？

Kub*_*lik 4 javascript jquery range selection

我需要获取节点的文本(或整个内部html),在contenteditable设置为的元素中截断当前插入符号(文本光标)位置true.我已经尝试过使用range.setStart()等,但我无法做出正面和反面的...

编辑:为了澄清,在某些事件中,我希望脚本从当前具有焦点的节点的开头提取文本到插入符号的位置(如果可编辑字段具有焦点,则当前闪烁的垂直线)并将其存储在变量中.动作类似于用户按下ctrl + shift + home和ctrl + c时会发生的情况

示例:给出html:

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

Run Code Online (Sandbox Code Playgroud)

假设插入符号在"好"和"再见"之间,我想要检索

"Hello, world<br> Good"

Answer 1

Mat*_*tra 6

你可以使用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>'));
});

Run Code Online (Sandbox Code Playgroud)

Answer 2

Tim*_*own 5

我建议采用以下方法:

创建包含所需内容的范围
调用范围的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;
}

Run Code Online (Sandbox Code Playgroud)

注意事项:

这在IE <= 8中不起作用,虽然它不是很难做到(通过使用其不同的选择/范围API或使用诸如Rangy之类的库来编写代码)
生成的HTML不保证是可编辑范围的原始HTML的子字符串.

归档时间：	12 年，8 月前
查看次数：	2267 次
最近记录：	12 年，8 月前