javascript - 从矩形中抓取 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();

有没有明显的方法可以做到这一点？到目前为止的问题之一是，我使用上述 func 获得的一些标签是“body”和“div id="page"'，其中包含我正在寻找的内容。任何解决方案都需要弄清楚如何只获取周围标签中需要的那些部分。

例如，如果我有一个很长的段落并重新标记了一半，我只想返回我选择的文本。

希望这个问题是有道理的。

Answer 1

javascript 和 jQuery 不是我的强项，但我想我会试着写一个我认为你想要的小例子。

很遗憾，我没有时间完成，所以目前选择框只能左右拖动，但如果这是你想要的，那么我相信你将能够改变它。

目前我只是建立一个选定标签的文本列表，我在鼠标松开后打印出来，但它按顺序循环，所以如果你将所有这些标签存储在一个数组中应该不会有太大问题想要。

当然，您也可以在每个循环中使用 $(this).html() 来获取每个选定标签的内容。

抱歉，如果我误解了您的问题，但这是您想要的吗？

jsfiddle:http://jsfiddle.net/cgKzv/ (在 Chrome 中编写和测试)