Question

使用下面的代码，我可以从一个可信的div的开头到插入位置获取所有内容。但我遇到的问题是range.toString()不返回像换行符这样的html标签，它只返回纯文本。

我需要获取所有内容，包括html标签。以下是我的代码：

<div id="divTxt" contenteditable>Hello, I am John<br>Nice to meet you</div>
<button onclick="getWordPrecedingCaret(document.getElementById('divTxt'))">Click</button>

function getWordPrecedingCaret(containerEl){
    var preceding = "",
        sel,
        range,
        precedingRange;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount > 0) {
            range = sel.getRangeAt(0).cloneRange();
            range.collapse(true);
            range.setStart(containerEl, 0);
            preceding = range.toString();
        }
    } else if ((sel = document.selection) && sel.type != "Control") {
        range = sel.createRange();
        precedingRange = range.duplicate();
        precedingRange.moveToElementText(containerEl);
        precedingRange.setEndPoint("EndToStart", range);
        preceding = precedingRange.text;
    }

    var words = range.toString().trim();
    console.log(words);
}

这是我的结果

Hello, I am JohnNice to meet you

但这是我需要的结果

Hello, I am John<br>Nice to meet you

Answer 1

使用而不是Range#toString代替Range#startContainer而返回Node。

然后，您可以访问将提供给您的节点的innerHTML Hello, I am John<br>Nice to meet you喜欢。

这是一个片段：

function getWordPrecedingCaret(containerEl){
    var preceding = "",
        sel,
        range,
        precedingRange;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount > 0) {
            range = sel.getRangeAt(0).cloneRange();
            range.collapse(true);
            range.setStart(containerEl, 0);
            preceding = range.toString();
        }
    } else if ((sel = document.selection) && sel.type != "Control") {
        range = sel.createRange();
        precedingRange = range.duplicate();
        precedingRange.moveToElementText(containerEl);
        precedingRange.setEndPoint("EndToStart", range);
        preceding = precedingRange.text;
    }

    var html = range.startContainer.innerHTML;
    console.log(html);
    
}

<div id="divTxt" contenteditable>Hello, I am John<br>Nice to meet you</div>
<button onclick="getWordPrecedingCaret(document.getElementById('divTxt'))">Click</button>

Range.toString（）不返回HTML标记

1 个答案: