18

我有一些 javascript 可以根据用户选择的内容来操作 html。对于真正的浏览器，我使用的方法利用了“Range”对象，如下所示：

    var sel = window.getSelection();
    var range = sel.getRangeAt(0);
    var content = range.toString();

content 变量包含所有选定的文本，效果很好。但是我发现我无法检测到结果字符串中的换行符。例如：

选定的文字是：

美国广播公司

定义

吉

range.toString() 计算结果为“abcdefghi”。

对特殊字符的任何搜索都不会返回 \n \f \r 甚至 \s 的实例。但是，如果我将变量写入可编辑控件，则会再次出现换行符。

有谁知道我错过了什么？

这些选择和操作在可编辑的 div 上可能是相关的。同样的行为在 Chrome、FireFox 和 Opera 中也很明显。令人惊讶的是，IE 无论如何都需要完全不同的代码，但那里没有任何问题，除了它只是 IE。

非常感谢。

4

3 回答 3

16

编辑我的帖子：

进行了一些实验，我发现它sel.toString()在 contenteditable div 中返回新行，而range.toString()在正常的不可编辑 div 中正确返回换行符，但在可编辑的 div 中不正确，正如您所报告的那样。

虽然找不到任何解释该行为的原因。

这是一个有用的链接http://www.quirksmode.org/dom/range_intro.html

于 2009-07-18T05:30:19.807 回答
3

我找到了至少两种其他方法，因此您仍然可以使用范围来查找 Mozilla 中插入符号的位置。

一种方法是打电话

var documentFragment = rangeObj.cloneContents ();

它包含一个 childNodes 数组，任何换行符都将显示为“HTMLBRElement”类的节点。


另一种方法是确保每个“br”标签后跟一个换行符（0x0a）！

这不会以任何可见的方式损害 HTML 内容，但现在只要调用 range.toString()，所有 HTML 中断都会转换为纯文本换行符！


我希望这会有所帮助——即使这个话题已经很老了。（反正我已经是死灵法师了，呵呵）：）

于 2014-08-14T07:15:46.223 回答
0

感谢 OP，我能够按照他的建议使用 window.getSelection() 来做到这一点。我需要获取文本，直到 InputEvent 上的插入符号位置，这为我提供了插入文本的静态范围。所以我有一个范围，但不一定是当前选择的范围。

function richToPoorText(range){
    //Caso base, está colapsado.
        console.log(range);
        var restoreRange=document.createRange(); //needed for restoring the caret pos.
        restoreRange.setStart(range[0].endContainer, range[0].endOffset);
        restoreRange.setEnd(range[0].endContainer, range[0].endOffset);
        rangeClone=document.createRange();
        rangeClone.setStart(__baseEditor,0);
        rangeClone.setEnd(range[0].endContainer, range[0].endOffset);
        var str;
        var sel=window.getSelection();
        sel.removeAllRanges();
        sel.addRange(rangeClone);   //sel does converts the br to newlines
        str=sel.toString();
        sel.removeAllRanges();
        sel.addRange(restoreRange);
        return str;

}

非常感谢您。如果有人有相同的用例，你可以使用这个片段

编辑：__baseEditor 是一个全局变量，指向编辑器的主 contenteditable div

于 2018-07-22T00:18:18.997 回答