javascript - 从矩形中抓取 HTML

标签 javascript jquery html dom

我想做的是允许用户在网站顶部绘制一个矩形,并抓取他在该矩形中看到的所有 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"',其中包含我正在寻找的内容。任何解决方案都需要弄清楚如何只获取周围标签中需要的那些部分。

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

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

最佳答案

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

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

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

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

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

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

关于javascript - 从矩形中抓取 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8081099/

相关文章:

JavaScript 不适用于我的 MasterPage 以外的页面以及未链接到它的页面

javascript - 使没有内容的div水平滚动

javascript - 以 AngularJS 的方式使用 toastr

javascript - 如何在手机中更改背景图像?

javascript - 带有 Iframe 目标的异步表单——OnLoad 在 FF、Chrome、IE9 中工作,在 IE7 中没有得到响应

Javascript:将鼠标悬停在问题上以及如何有效地构建 html?

javascript - 使用 "on change"回调从 jQuery 插件更新 AngularJS 模型

php - 我的购物车产品添加和减去无法正常工作

html - 是否有特定于 tr 行的 CSS 选择器的语法?

javascript - 如何将 div 定位在父 td 的底部?