从矩形中抓取 HTML
我想做的是允许用户在网站顶部绘制一个矩形，并抓取他在该矩形中看到的所有 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 的东西。例如此代码片段中的选择内容：
var range = window.getSelection().getRangeAt(0);
var selectionContents = range.extractContents();
是否有明显的方法可以做到这一点？ 到目前为止的问题之一是，我使用上述函数获得的一些标签是“body”和“div id =“page””内容，其中包含我正在寻找的内容。任何解决方案都需要弄清楚如何仅获取周围标签中需要的部分。
例如，如果我有一个很长的段落并重新排列了其中的一半，我只想返回我选择的文本。
希望这个问题有意义。
What i would like to do is to allow the user to draw a rectangle on top of a website, and grabbing all the html he sees in that rectangle.
I know this can't be done perfectly but I was wondering how well it could be done.
i was thinking of doing something like this
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;
}
This gives me more or less the tags in that area. I wonder if there is a generic way to build trees from these tags and output html.
I am looking for something like a DocumentFragment. Such as selectionContents from this snippet:
var range = window.getSelection().getRangeAt(0);
var selectionContents = range.extractContents();
Is there an obvious way to do this?
One of the problems so far is that some of the tags i get using the above func are 'body' and 'div id="page"' stuff, which contain what i am looking for. Any solution would need to figure out how to take only those parts of the surrounding tags taht are needed.
For instance, if i have a long paragraph and recntagled half of it, i want only the text in my selection to be returned.
Hope this question makes sense.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果您知道三角形的面积，则可以使用跨度标签包围文本的所有字符，例如 this然后检查这些跨度标签是否落在您的矩形内。为了使它更容易，我会将类分配给这些跨度标签。然后，使用 $.each() 连接文本以循环跨度标记，检查它们是否落在矩形内，如果落在矩形内，则连接到字符串变量。另外，如果您使用 document.elementFromPoint()，它只会返回位于该位置且 z 索引最高的元素（如果您有一些分层元素）。
Provided you know the area of your triangle, you can possibly surround all characters of text with span tags like this and THEN do a check if those span tags fall within your rectangle. To make it easier, I would assign classes to these span tags. Then, concatenate the text using $.each() to loop the span tags,check if they fall within the rectangle, and , if they do, concatenate to a string variable. Also, if you use document.elementFromPoint(), it will only return the element that is at that position with the highest z-index (in case your had some elements layered).
javascript 和 jQuery 不是我的强项，但我想我会尝试写一个我认为你想要的小例子。
不幸的是，我没有时间完成，所以目前选择框只能向左和向下拖动，但如果这是您想要的，那么我相信您将能够更改它。
目前，我只是构建一个选定标签的文本列表，在鼠标松开后将其打印出来，但它按顺序循环，因此如果您愿意，将所有这些标签存储在数组中应该不会有太大问题。
当然，您也可以在每个循环中使用 $(this).html() 来获取每个选定标签的内容。
抱歉，如果我误解了你的问题，但这就是你想要的吗？
jsfiddle: http://jsfiddle.net/cgKzv/ （在 Chrome 中编写和测试）
javascript and jQuery aren't my strong points but I thought I would try to write a small example of what I think you want.
Unfortunately I don't have time to finish so currently the selection box can only drag left and down but if it is what you'e after then I'm sure you will be able to alter it.
Currently I'm just building a text list of selected tags which I'm printing out after mouse up, but it loops through in order so it shouldn't be much problem to store all of these tags in an array if you wanted.
Of course you could also use $(this).html() in the each loop to get the contents of each selected tag too.
Sorry if I mis-understood your question, but was this the kind of thing you were after?
jsfiddle: http://jsfiddle.net/cgKzv/ (Written and tested in Chrome)