问题在JavaScript Range对象检测换行(Problem detecting Newlin

2019-06-26 06:06发布

我有一些javascript任何能够根据用户选择什么样的HTML。 对于真正的浏览器,我使用杠杆的“范围”的对象,方法得到这样的:

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

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

选定的文本是:

ABC

高清

记录

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

对特殊字符的任何搜索到任何\ n \˚F\ r甚至\ S的实例。 但是,如果我写的变量out为可编辑的控制,行饲料都存在一次。

有谁知道我错过了什么?

这可能是相关的,这些选择和操作上可编辑的div。 同样的行为是在Chrome,Firefox和Opera明显。 令人惊讶的IE需要完全不同的代码,无论如何,但目前还没有任何问题存在,比它只是被IE等。

非常感谢。

Answer 1:

编辑我的帖子:

试验了一下,我发现sel.toString()返回CONTENTEDITABLE div的新线,而range.toString()正常在正常不可编辑的div返回换行,但不是在编辑的,因为你的报道。

找不到的行为作出任何解释,虽然。

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



Answer 2:

我发现至少两种其他的方式,所以你仍然可以使用的范围内找到在Mozilla插入符的位置。

一种方法是调用

var documentFragment = rangeObj.cloneContents ();

其保持的childNodes的阵列,以及任何换行符将显示为类的节点“HTMLBRElement”。


另一种方法是确保每一个“BR”标签后跟一个换行符(0X0A)!

这不会伤害任何可见的方式HTML内容,但是现在所有的HTML符转换为纯文本线尽快打破的range.toString()被调用!


我希望这有助于 - 即使这个话题是很老了。 (我是死灵反正已经,嘿嘿):)



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;

}

三江源非常OP。 如果有人有相同的使用情况,您可以使用此snipset

编辑:__baseEditor是一个全局变量指向编辑器的主要CONTENTEDITABLE DIV



文章来源: Problem detecting Newlines in JavaScript Range Object