Получить путь к узлу выделенного текста пользователем с помощью JavaScript

Question

Получить путь к узлу выделенного текста пользователем с помощью JavaScript

0

Я пытаюсь построить следующее: скажем, что пользователь выбирает "List Two" для его копирования, как мне получить путь к этому узлу в javascript? Пример узла, если выбрано "List Two": //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 в порядке. Дайте мне знать, если вам нужно, чтобы я что-то разъяснил вам. Благодарю.

EDIT, добавив больше информации: Ответы, которые у меня есть, потрясающие, но у меня есть больше препятствий. Пусть говорят, что пользователь одновременно выбирает "Список один" и "Список два" (это два разных пути), как бы я получил два разных пути в одном выборе/снятии? По выбору я имею в виду выбор текста с сайта с указателем (выделение), не путайте его одним щелчком. Еще раз спасибо, очень полезно.

YoUser3139280 04 янв. 2014, в 16:52

Источник

Теги:

javascript

jquery

html

dom

path

2 ответа

Ещё вопросы

Arun P Johny · Answer 1 · 2014-01-04T13-44-00.000Z

Использование 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)
})

Демо: скрипка

Использование метода

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

Демо: скрипка

Без 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('/'))
}

Демо: скрипка

Это очень интересно, но я попробовал демоверсии, и они работают по нажатию вместо выбора текста. Причина в том, чтобы разрешить множественный выбор. Каким было бы решение, если бы пользователь выделил несколько текстов из разных узлов одновременно? Пример: пользователь выбирает «Список один» и «Список два» одновременно, и они находятся в разных узлах. Может ли вывод быть двумя путями? По одному на каждого? Благодарю.

archetipo · Answer 2 · 2014-01-04T14-59-00.000Z

с JQuery вы можете использовать селектор "*"

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