使用javascript获取用户选定文本的节点路径答案

【问题标题】：Get the node path of selected text by the user with javascript使用javascript获取用户选定文本的节点路径
【发布时间】：2014-01-22 06:24:36
【问题描述】：

我正在尝试构建以下内容：假设用户选择“列表二”来复制它，我如何在 javascript 中获取该节点的路径？选择“列表二”时的节点示例：//HTML/BODY/DIV/UL/LI[1]
我的文件 index.php

<html>
    <head>
        <title>TheWeb</title>
    </head>
    <body style="background-color:#e9e9e9; color:#777;">
        <div>
            <ul id="list">
                <li>List One</li>
                <li>List Two</li>
                <li>List Three</li>
                <li id="four">List Four</li>
            </ul>
            <hr />
            <div>
                <p id="p">Just a Paragraph</p> <i>xdd</i>
                <hr />
            </div>
        </div>
    </body>
</html>

我目前正在使用的 javascript.js 是从我再也找不到的地方复制而来的：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    function getElementPath(element)
    {
        return "//" + $(element).parents().andSelf().map(function() {
            var $this = $(this);
            var tagName = this.nodeName;
            if ($this.siblings(tagName).length > 0) {
                tagName += "[" + $this.prevAll(tagName).length + "]";
            }
            return tagName;
        }).get().join("/").toUpperCase();
    }

    $(document).ready(function() {
        $("div, p, a, ul, li, table, td, tr, b, i, span, u").click(function(event) {
            event.stopPropagation();
            window.alert(getElementPath(this));
        });
    });
</script>

这也需要 jQuery。这行得通，但它不稳定，并且有错误。另外，是否有像* 这样的通用标签，而不是独立使用所有标签？

$("div, p, a, ul, li, table, td, tr, b, i, span, u").click()

注意：我不喜欢使用 jQuery，但如果不使用 jQuery 会很复杂，那么 jQuery 也可以。如果您需要我向您澄清任何事情/事情，请告诉我。谢谢。

编辑，添加更多信息：我得到的答案是惊人的，但我遇到了更多的障碍。假设用户同时选择“列表一”和“列表二”（这是两条不同的路径）我如何在一次选择/镜头中获得两条不同的路径？选择我的意思是用你的指针（突出显示）从网站中选择文本，不要将它与单击混淆。再次感谢，非常有帮助。

【问题讨论】：

标签： javascript jquery html dom path

【解决方案1】：

使用 jQuery 非常简单...

//click handler for the entire document
$(document).click(function (e) {
    //find the path from the current element to the html element
    var path = $(e.target).parents().addBack().map(function () {
        //find siblings of same type
        var siblings = $(this).siblings(this.tagName);
        //don't add the index if there are no siblings of same type
        return this.tagName + (siblings.length ? '[' + $(this).prevAll(this.tagName).length + ']' : '');
    }).get().join('/');
    console.log(path)
})

演示：Fiddle

使用你的方法

$(document).ready(function () {
    $(document).click(function (event) {
        console.log(getElementPath(event.target));
    });
});

演示：Fiddle

没有 jQuery

document.getElementsByTagName('body')[0].onclick = function (e) {
    var array = [];
    var el = e.target;
    while (el != document) {
        var sibs = 0,
            sib = el.previousSibling;
        while (sib.previousSibling) {
            if (sib.tagName == el.tagName) {
                sibs++;
            }
            sib = sib.previousSibling;
        }

        array.push(el.tagName + (sibs ? '[' + sibs + ']' : ''));
        el = el.parentNode;
    }
    console.log('//' + array.reverse().join('/'))
}

演示：Fiddle

【讨论】：

这很有趣，但我已经尝试过演示，他们正在点击而不是选择文本。原因是允许多选。如果用户同时从不同节点选择多个文本，解决方案可能是什么？示例：用户同时选择“列表一”和“列表二”，它们位于不同的节点，输出可以是两条路径吗？每人一份？谢谢。

【解决方案2】：

使用 Jquery 你可以使用"*" selector

$(document).ready(function() {
  $( "*" ).bind( "click", function() {
     window.alert(getElementPath($( this ));
  });
}

【讨论】：