Javascript 除一个子元素外的整个元素的文本选择

我有这样的代码：

function select_all(element) {
    var range;
    if (document.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();
        if (selection.setBaseAndExtent) {
            selection.setBaseAndExtent(element, 0, element, 1);
        } else if (document.createRange) {
            range = document.createRange();
            range.selectNodeContents(element);
            selection.removeAllRanges();
            selection.addRange(range);
        }
    }
}

<div class="root">
  <div class="wrapper">
    <div class="output" role="log">
      <div>text</div>
      <!-- there can be more divs here -->
    </div>
    <div class="inner" style="width: 100%;">
      <span class="foo" style="visibility: visible;">
        <span>&gt;&nbsp;</span>
      </span>
      <div class="cursor-line" role="presentation" aria-hidden="true">
        <span></span>
        <span class="cursor">&nbsp;</span>
        <span></span>
      </div>
      <!-- there can be more divs here -->
      <textarea autocapitalize="off" spellcheck="false" tabindex="1" class="clipboard" style=""></textarea>
    </div>
  </div>
</div>

它工作得很好，除了一件事，我有如下html：

function select_all(element) {
    var range;
    if (document.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();
        if (selection.setBaseAndExtent) {
            selection.setBaseAndExtent(element, 0, element, 1);
        } else if (document.createRange) {
            range = document.createRange();
            range.selectNodeContents(element);
            selection.removeAllRanges();
            selection.addRange(range);
        }
    }
}

<div class="root">
  <div class="wrapper">
    <div class="output" role="log">
      <div>text</div>
      <!-- there can be more divs here -->
    </div>
    <div class="inner" style="width: 100%;">
      <span class="foo" style="visibility: visible;">
        <span>&gt;&nbsp;</span>
      </span>
      <div class="cursor-line" role="presentation" aria-hidden="true">
        <span></span>
        <span class="cursor">&nbsp;</span>
        <span></span>
      </div>
      <!-- there can be more divs here -->
      <textarea autocapitalize="off" spellcheck="false" tabindex="1" class="clipboard" style=""></textarea>
    </div>
  </div>
</div>

文本

当我调用函数textarea也被选中时，我试图清除textarea中的选择，但似乎只有一个选择，它消失了

我还尝试在选择之前删除textarea，并在选择之后追加，但这也会使textarea处于选中状态

如何选择除textarea之外的根目录

---

我无法将textarea移动到外部，因为to需要与

.inner

相对，而我们又回到了2000年初：）您需要提供哪些浏览器？Imo

createRange

是最灵活的方法，它可以

在（节点）

之前/之后设置开始/结束，并且根据MDN，它从IE9开始就受到支持。虽然我在尝试实现和回答时遇到了问题；似乎没有选择起始嵌套多于结束嵌套的范围。@Thomas我在

中的最后一个div中使用了范围对象setStart.output

和setEnd。谢谢我还保留了用于Safari的setBaseAndExtent代码，不知道他们是否更改了api。我们回到了2000年初：）您需要提供哪些浏览器？Imo

createRange

是最灵活的方法，它可以

在（节点）

之前/之后设置开始/结束，并且根据MDN，它从IE9开始就受到支持。虽然我在尝试实现和回答时遇到了问题；似乎没有选择起始嵌套多于结束嵌套的范围。@Thomas我在

中的最后一个div中使用了范围对象setStart.output

和setEnd。谢谢我还保留了setBaseAndExtent，代码是为Safari编写的，我不知道他们是否更改了api。