计算所选内容中的节点数

count no of nodes in a selection

本文关键字：节点 计算所      更新时间：2023-09-26

如果我在浏览器上选择大约 3 或 4 行，那么我希望在浏览器上选择的编号，即计算选定的<span>

我有一个示例.html其中包括以下代码，

<div id="p">
<p id="p1">
    <span>wefwef wefwefsdfc fcsdcs wefwscsdc qwefwcsdc </span>
    <span>wefwec acvsdc wecfsdc <br />asdcsdc sdcdc wedwed</span>
    <span> wefwec acvsdc wecfsdc asdcsdc sdcdc</span>
    <span> wefwec acvsdc wecfsdc<br /> asdcsdc sdcdc</span>
    <span>wefwec acvsdc wecfsdc asdcsdc sdcdc</span>
</p>
<p>
    <span>wefwef wefwefsdfc fcsdcs wefwscsdc qwefwcsdc </span>
    <span>wefwec acvsdc wecfsdc <br />asdcsdc sdcdc wedwed</span>
    <span> wefwec acvsdc wecfsdc asdcsdc sdcdc</span>
    <span> wefwec acvsdc wecfsdc<br /> asdcsdc sdcdc</span>
</p>
</div>

我有以下问题：

  1. 如何计算选定的<span>？
  2. 我如何获得选定的<span>？

您可以使用类似于以下内容的代码获取所选内容的 HTML：

function getSelectedHTML () {
    var result = '';
    var range;
    if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        result = range.htmlText;
    }
    else if (window.getSelection) {
        var selection = window.getSelection();
        if (selection.rangeCount > 0) {
            range = selection.getRangeAt(0);
            var clonedSelection = range.cloneContents();
            var div = document.createElement('div');
            div.appendChild(clonedSelection);
            result = div.innerHTML;
        }
    }
    return result;
}

之后，就是解析选择的问题。 一种方法是使用jQuery：

var count = $('span', $(getSelectedHTML())).length;
相关文章：