javascript - 将 document.getSelection() 扩展到整个段落

Question

对于 IE，此 js 代码仅在选择的长度非零时有效:

document.execCommand("FormatBlock",false,tag);

获取包含节点很简单:

var node = document.getSelection().anchorNode;

但我真的不明白如何设置选择以包含该节点的所有文本。

对我来说最大的困惑来源是范围、选择、两者之间的关系以及如何在 contenteditable div 的上下文中一起使用它们，这似乎与输入控件有不同的规则。我尝试寻找教程，但“选择”和“范围”是宽泛的术语，我还没有找到任何好的东西。

我找到了this in msdn但由于我对范围和选择的不理解，我不知道如何应用它。这是该页面的代码片段和序言文本。

When applied to a TextRange object, the select method causes the current object to be highlighted. The following function uses the findText method to set the current object to the text in the TextRange object. The function assumes an element that contains the text string "text here".

function TextRangeSelect() {
  var r = document.body.createTextRange();
  r.findText("text here");
  r.select();
}

从中我编写了以下内容，但它会导致选择整个文档。

var sel = document.getSelection();
var r = document.body.createTextRange();
r.findText(sel.anchorNode);
r.select();

Answer 1

这会将选择范围扩大到整个段落。

sel.selectAllChildren(sel.anchorNode.parentNode);

由于您只需要对 Internet Explorer 执行此操作，因此这是您的所有浏览器版本

if (document.getSelection) {
  var sel = document.getSelection();
  var node = typeof sel.anchorNode.data == "string" ? 
    sel.anchorNode.parentNode : 
    sel.anchorNode;
  sel.selectAllChildren(node);
}