Question

我正在使用html中的选定范围进行小测试考试

<body>
  <div id="text">
    <p> Hello | everybody</p> 
    <p> To day is a sunny day <b> Clouds drifted | slowly</b> </p>
    <p> Something bla bla</p>
</div>
</body>

让我们采取几个标志＆＃39; |＆＃39;代表我制作的范围（使用鼠标选择）。我知道我可以使用＆＃34; commonAncestorContainer（）＆＃34;功能并获取所有选定的元素，在我的情况下，范围将填写

"p : nth-child(1)"
"p:nth-child(2)" and "b" tag.

但是如何获得每个元素的节点值属于所选范围。考试：

"p:nth-child(1)" : "everybody" instead of "Hello everybody".
"p:nth-child(2)" : "To day is a sunny day"
"<b>" : Clouds drifted .

这是我搜索过的代码，但它无法解决我的问题

<script>
  function rangeIntersectsNode(range, node) {
      var nodeRange;
      if (range.intersectsNode) {
        return range.intersectsNode(node);
      } else {
        nodeRange = node.ownerDocument.createRange();
        try {
          nodeRange.selectNode(node);
        } catch (e) {
          nodeRange.selectNodeContents(node);
        }

        return range.compareBoundaryPoints(Range.END_TO_START, nodeRange) == -1 &&
            range.compareBoundaryPoints(Range.START_TO_END, nodeRange) == 1;
      }
    }

    function getSelectedElementTags(win) {
      var range, sel, elmlist, treeWalker, containerElement;
      sel = win.getSelection();
      if (sel.rangeCount > 0) {
        range = sel.getRangeAt(0);
      }

      if (range) {
        containerElement = range.commonAncestorContainer;
        //window.console.log(containerElement);
        if (containerElement.nodeType != 1) {
          containerElement = containerElement.parentNode;
        }
        //window.console.log(range.getNodes([3]));

        treeWalker = win.document.createTreeWalker(
            containerElement,
            NodeFilter.SHOW_ELEMENT,
            function(node) {
              return rangeIntersectsNode(range, node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
            },
            false
            );
       window.console.log(treeWalker);
        elmlist = [treeWalker.currentNode];
        while (treeWalker.nextNode()) {
          elmlist.push(treeWalker.currentNode);
        }

        console.log(elmlist);
      }
    }


</script>
<body>
  <div id="text">
    <p> Hello everybody</p> 
    <p> To day is a sunny day <b> Clouds drifted slowly</b> </p>
    <p> Something bla bla</p>
</div>
  <input type = "button" onclick = "getSelectedElementTags(window)" value = "Get selected elements">
</body>

谢天谢地，祝你有个美好的一天。

如何获取文本节点值属于所选范围

0 个答案: