Question

使用javascript，我想在div中获取所选文本。我的问题与Get selected text from only one div几乎相同，只是在div中可能有任意数量的其他嵌套div。该问题的答案仅适用于一个嵌套div。

换句话说，我说有一个div，STUFF。 STUFF可以是任意HTML，包括许多其他嵌套的div。我想在forkfork div中选择HTML，包括任何选定的嵌套div。

更新：这是一些代码，改编自上一个问题。我希望能够在“forkfork”div中选择任何内容，并将其返回，最好是原始HTML。

<html>
<body>
<div id="forkfork">want to be able to select anthing within here
    <div id="child">or in here</div>
    <div id="child1">perhaps in here,
        <div id="child2">maybe in here,
            <div id="child3">or in here
            </div>
        </div>
    </div>
    though here.
</div>
<div id="b">don't want to have this returned.</div>

<button id="btn">btn
<script>
function select() {
    var flag = 0;
    sel = window.getSelection();
    for (var i = 0; i < sel.rangeCount; i++) {
        var s = sel.getRangeAt(i).startContainer.parentNode.id;
        var e = sel.getRangeAt(i).endContainer.parentNode.id;
        if (s == "forkfork") flag = 1;
        if (flag = 1 && e == "forkfork" || e == "child") flag = 2;
    }

    if (flag == 2) alert(sel);

}

document.getElementById("btn").addEventListener("click", function () {
    select();
});
</script>
</body>

还有一个jsfiddle：http://jsfiddle.net/4n3ud3nb/1/

Answer 1

使用范围内的cloneContents()可以返回选择内容。

如果我们的目标元素cloneContents过度运行，则第一次forkfork调用将返回内容。

如果我们发现没有选择的过度运行，我们将检查以确保我们的选择起始范围是目标元素的子项。

以下是示例代码段：

＆＃13;

function select(event) {
  var sel;
  //console.log(document.getSelection);
  if (document.getSelection) 
    sel = document.getSelection();
  else
    sel = document.selection.createRange();
  //console.log('sel',sel);
  var selText = '';
  var forkfork = document.getElementById("forkfork");
  if (sel.rangeCount > 0) {
    var range = sel.getRangeAt(0);
    var clonedSelection = range.cloneContents().querySelector("#forkfork");
    if (clonedSelection) {
      selText = clonedSelection.innerHTML;
    } else {
      clonedSelection = range.cloneContents();
      var startNode = sel.getRangeAt(0).startContainer.parentNode;
      //console.log(isChild(startNode, forkfork));
      if (isChild(startNode, forkfork)) {
        var div = document.createElement('div');
        div.appendChild(clonedSelection);
        selText = div.innerHTML;
      }
    }
  }

    alert(selText.toString());
}

function isChild(child, parent) {
  if (child === parent) return true;
  var current = child;
  while (current) {
    if (current === parent) return true;
    current = current.parentNode;
  }
  return false;
}

document.getElementById("btn").addEventListener("click", select);

＆＃13;

#a {
  background: #C0D9AF;
}
#b,#b2 {
  background: #ECC8EC;
}
#c {
  background: #AFEEEE;
}

＆＃13;

<div id="b">don't want to have this returned.</div>
  <div id="forkfork">want to be able to select anthing within here
    <div id="child">or in here</div>
    <div id="child1">perhaps in here,
      <div id="child2">maybe <strong>in</strong> here,
        <div id="child3">or in here</div>
      </div>
    </div>
    though here.
  </div>
  <div id="b2">And, don't want to have this returned.</div>

  <button id="btn">btn</button>

＆＃13;

Answer 2

.innerHTML将返回div内的所有内容。

(function() {
    $(document).ready(function() {
        var x = document.getElementById('forkfork').innerHTML;
        console.log(x);
    });
}());

console.log(x)将输出：

want to be able to select anthing within here
    <div id="child">something else</div>
    <div id="child1">another thing,
        <div id="child2">and another thing,
            <div id="child3">and another thing
            </div>
        </div>
    </div>
    though here.

如果您想要所有文字：

(function() {
    $(document).ready(function() {
        var x = $('#forkfork').text();
        console.log(x);
    });
}());

将输出：

want to be able to select anthing within here
    something else
    another thing,
        and another thing,
            and another thing



    though here

使用带有任意嵌套div的div获取所选文本

2 个答案:

以下是示例代码段：