Question

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

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

内容变量包含所有选定的文本，工作正常。但是我发现我无法在结果字符串中检测到换行符。例如：

所选文字是：

ABC

DEF

GHI

range.toString（）计算为“abcdefghi”。

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

有谁知道我错过了什么？

这些选择和操作可能与可编辑的div相关。在Chrome，FireFox和Opera中也可以看到相同的行为。令人惊讶的是IE无论如何都需要完全不同的代码，但除了它只是IE之外，没有任何问题。

非常感谢。

Answer 1

编辑我的帖子：

尝试一下，我发现sel.toString()会在可信任的div中返回新行，而range.toString()会在正常的不可编辑的div中正确返回换行符，但不会像您报告的那样在可编辑的div中返回换行符。

但无法找到行为的任何解释。

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

Answer 2

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

一种方法是致电

var documentFragment = rangeObj.cloneContents ();

包含一个childNodes数组，任何换行符都将显示为类＆＃34; HTMLBRElement＆＃34;的节点。

另一种方法是确保每一个＆＃34; br＆＃34; tag后面跟一个换行符（0x0a）！

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

我希望这有帮助 - 即使这个话题很老。（无论如何，我已经是一名死灵法师了，呵呵）：）

Answer 3

由于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

检测JavaScript范围对象中的换行符的问题

3 个答案: