Захват HTML из прямоугольника

Question

То, что я хотел бы сделать, - это позволить пользователю нарисовать прямоугольник поверх веб-сайта и захватить весь HTML, который он видит в этом прямоугольнике.

Я знаю, что это нельзя сделать идеально, но мне было интересно, насколько хорошо это можно сделать.

я думал сделать что-то вроде этого

function getTagsInArea(p1, p2){
    var ret = {}
    for(x=p1.x;x<p2.x;x+=10){
        for(y=p1.y;y<p2.y;y+=10){
            var el = document.elementFromPoint(x,y);
            if(typeof ret[el] =='undefined'){
                ret[el]=el;
            }
            else{console.log('not appending '+el);}
        } 
    } 
    return ret;
}

Это дает мне более или менее метки в этой области. Интересно, существует ли общий способ построения деревьев из этих тегов и вывода html.

Я ищу что-то вроде DocumentFragment. Например, selectionContents из этого фрагмента:

var range = window.getSelection().getRangeAt(0);
var selectionContents = range.extractContents();

Есть ли очевидный способ сделать это? Одна из проблем на данный момент состоит в том, что некоторые из тегов, которые я использую с помощью вышеупомянутой функции, - это «body» и «div id =« page », которые содержат то, что я ищу. Любое решение должно было бы выяснить, как взять только те части окружающих тегов, которые необходимы.

Например, если у меня длинный абзац и его половина помечена, я хочу, чтобы возвращался только текст в моем выделении.

Надеюсь, этот вопрос имеет смысл.

Answer 1

javascript и jQuery - не мои сильные стороны, но я подумал, что попытаюсь написать небольшой пример того, что, я думаю, вам нужно.

К сожалению, у меня нет времени, чтобы закончить, поэтому в настоящее время поле выбора можно перетаскивать только влево и вниз, но если это то, что вам нужно, то я уверен, что вы сможете изменить его.

В настоящее время я просто создаю текстовый список выбранных тегов, который я распечатываю после наведения мыши вверх, но он проходит по порядку, поэтому не составит большого труда сохранить все эти теги в массиве, если вы хотел.

Конечно, вы также можете использовать $ (this) .html () в каждом цикле, чтобы получить содержимое каждого выбранного тега.

Извините, если я неправильно понял ваш вопрос, но разве вы за этим следили?

jsfiddle: http://jsfiddle.net/cgKzv/ (Написано и протестировано в Chrome)

Answer 2

Если вы знаете область своего треугольника, вы можете окружить все символы текста такими тегами span, как this , и ТОГДА проверить, попадают ли эти теги span в ваш прямоугольник.Чтобы было проще, я бы назначил классы этим тегам span.Затем объедините текст с помощью $ .each (), чтобы зациклить теги span, проверить, попадают ли они в прямоугольник, и, если они есть, объединить со строковой переменной.Кроме того, если вы используете document.elementFromPoint (), он вернет только тот элемент, который находится в этой позиции с самым высоким z-индексом (в случае, если у вас было несколько слоев с несколькими слоями).