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

如果您知道三角形的区域，则可以使用this等范围标记围绕文本的所有字符，然后检查这些范围标记是否属于矩形。为了更容易，我会为这些span标签分配类。然后，使用$ .each（）连接文本以循环span标记，检查它们是否属于矩形，如果是，则连接到字符串变量。此外，如果使用document.elementFromPoint（），它将仅使用最高 z-index返回该位置的元素（如果您将某些元素分层）。

从矩形中抓取HTML

2 个答案: