V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
okwork
V2EX  ›  问与答

当当网的在线图书,这个文字乱序是什么技术实现的?防抄袭效果不错

  •  
  •   okwork · 2019-10-15 18:20:09 +08:00 · 2446 次点击
    这是一个创建于 1626 天前的主题,其中的信息可能已经有所发展或是发生改变。

    输出是乱序,阅读是顺序:

    e.dangdang 点 com/pc/reader/index.html?id=19004 (数字太多敏感词,接上) 65429

    <div class="wraper" style="width: 660px; height: 880px; position: absolute; left:0px; top:0px; overflow: hidden; ">
    <div class="text" style="width: 660px; height: 880px; position: absolute; left:0px; top:0px;">
    <div><style type="text/css">
    .fs-40bdb7ae-1aa {
    font-size:19px;
     font-family:'Microsoft Yahei';
     position:absolute;
    } 
    .fs-40bdb7ae-2b0 {
    font-size:19px;
     font-family:Arial;
     position:absolute;
    } 
    </style><span class="fs-40bdb7ae-1aa" style="left:346px; bottom:361px; ">日</span>
    <span class="fs-40bdb7ae-1aa" style="left:432px; bottom:469px; ">《</span>
    <span class="fs-40bdb7ae-1aa" style="left:134px; bottom:730px; ">、</span>
    <span class="fs-40bdb7ae-1aa" style="left:520px; bottom:760px; ">进</span>
    <span class="fs-40bdb7ae-1aa" style="left:83px; bottom:439px; ">短</span>
    <span class="fs-40bdb7ae-1aa" style="left:467px; bottom:591px; ">;</span>
    <span class="fs-40bdb7ae-1aa" style="left:121px; bottom:652px; ">治</span>
    <span class="fs-40bdb7ae-1aa" style="left:122px; bottom:561px; ">阅</span>
    <span class="fs-40bdb7ae-1aa" style="left:596px; bottom:730px; ">的</span>
    <span class="fs-40bdb7ae-1aa" style="left:425px; bottom:300px; ">门</span>
    <span class="fs-40bdb7ae-1aa" style="left:463px; bottom:300px; ">族</span>
    
    此处省略几百字。。。
    
    </div>
    </div>
    </div>
    
    20 条回复    2019-10-16 10:32:08 +08:00
    gIrl1990
        1
    gIrl1990  
       2019-10-15 20:13:03 +08:00
    哪一页啊,来一张 效果图。
    creedowl
        2
    creedowl  
       2019-10-15 20:15:03 +08:00 via Android
    我猜是字体
    learnshare
        3
    learnshare  
       2019-10-15 20:20:47 +08:00
    这不简单的定位么
    看标点基本都是全角的,所以单页内乱序,然后根据网格生成坐标就可以了
    Wincer
        4
    Wincer  
       2019-10-15 20:24:04 +08:00 via Android   ❤️ 1
    主要是防爬虫,穿插了很多没用的字符,再隐藏掉。https://imweb.io/topic/595b7161d6ca6b4f0ac71f05
    bigriverhorse
        5
    bigriverhorse  
       2019-10-15 20:25:51 +08:00 via Android   ❤️ 1
    楼主,这个还是勉强能连在一起猜,你去看看大众点评的餐厅介绍和用户评价,会大开眼界
    okwork
        6
    okwork  
    OP
       2019-10-15 20:32:30 +08:00
    @gIrl1990 发不出完整的链接,你把这个拼起来就可以看了

    https 冒号 //e.dangdang 点 com/pc/reader/index.html?id=19004 (数字太多敏感词,id 接上) 65429
    exip
        7
    exip  
       2019-10-15 20:32:30 +08:00 via Android
    楼主也可以看看天眼查,一样的方法。
    猜测是用字体实现的,忘记在哪看过这种方法了。
    okwork
        8
    okwork  
    OP
       2019-10-15 20:38:46 +08:00
    @creedowl 爬虫靠猜基本就跪了,说明反趴效果好啊。

    初略看了下,猜测是后台打碎存储的,每个字在前端重新排列。这个反趴效果几乎就是无解了,就不知道后台负载是不是很大。
    Rwing
        9
    Rwing  
       2019-10-15 20:56:00 +08:00
    其实不菲啥劲,横纵坐标间距都是固定的,花点时间就能复原
    gIrl1990
        10
    gIrl1990  
       2019-10-15 21:09:41 +08:00
    @okwork 我是说图,截图,不是链接。
    dremy
        11
    dremy  
       2019-10-15 22:00:11 +08:00 via iPhone
    截图后 OCR 了解一下
    ochatokori
        12
    ochatokori  
       2019-10-15 22:15:17 +08:00 via Android
    bottom 和 left 就定位了啊

    你把 span 按照这两个属性排序的丢到网格里面不就好了
    后端也不是一定要乱序储存,输出的时候先定位再打乱给 html 完全可以吧
    nlysh007
        13
    nlysh007  
       2019-10-15 22:47:57 +08:00
    left 升序 bottom 降序排下就还原了吧,,也就分段要多考虑下...
    imdong
        14
    imdong  
       2019-10-15 23:16:31 +08:00
    $.ajax({
    type: "GET",
    url: "https://e.dangdang.com/media/api.go?action=getPcChapterInfo&epubID=1900465429&permanentId=2.0170111163553175e+34&consumeType=1&platform=3&deviceType=Android&deviceVersion=5.0.0&channelId=70000&platformSource=DDDS-P&fromPaltform=ds_android&deviceSerialNo=html5&clientVersionNo=5.8.4&token=&chapterID=2&pageIndex=0&locationIndex=3&wordSize=2&style=2&autoBuy=0&chapterIndex=",
    dataType: "json",
    success: function (response) {
    let data = JSON.parse(response.data.chapterInfo).snippet,
    regex = '<span class="[^"]+" style="left:([0-9]+)px; bottom:([0-9]+)px; ">([^<]+)<\/span>',
    result = [],
    str = "";

    data.match(RegExp(regex, 'g')).forEach(item => {
    let info = item.match(RegExp(regex));
    result[info[2]] = result[info[2]] || [];
    result[info[2]][info[1]] = info[3];
    });

    result.forEach(item => {
    str = item.join("") + str;
    });
    console.log(str);
    }
    });
    imdong
        15
    imdong  
       2019-10-15 23:27:33 +08:00   ❤️ 1


    似乎都不用排序,按照分成数组丢进去,再取出来就自动排序好了...

    至于 不同的段落是需要考虑一下的,还有就是不同的字体,如序和标题。
    其实也很简单,根据 css 再分类一下即可。

    我认为当当应该提高难度,同一行列也用不同的 css,css 里面在加上偏移。
    learnshare
        16
    learnshare  
       2019-10-15 23:50:59 +08:00
    @imdong 你这要搞得人家本周加班改版上线
    maomaomao001
        17
    maomaomao001  
       2019-10-16 00:14:45 +08:00
    我有点搞不懂了,这些企业也明明不算是小企业了,他们为什么不正当搞自己的本身业务, 被爬了,或者有人犯法了,让他们受到惩罚,助力完善相关法律法规不好吗 , 为什么会搞出这么多奇奇怪怪的定西
    axwz88
        18
    axwz88  
       2019-10-16 01:30:00 +08:00 via Android   ❤️ 1
    @maomaomao001 你这逻辑不就像女人被猥亵怪她穿的太性感吗,本身别人网站条约里写明不让爬虫爬,有人爬自然是非法访问,相比于靠法律制约还是想怎么反爬来的实在
    maomaomao001
        19
    maomaomao001  
       2019-10-16 10:31:57 +08:00
    @axwz88 到底是怎么看出这种逻辑的 。。。。 我表达的明明是
    它(比如百度腾讯阿里)作为不那么小的企业 , 为什么不试着推进更加规范(正常)的商业模式,
    我不太相信如果支付宝被黑了他们仅仅是修复漏洞完事儿 。。。 肯定不会这样吧
    既然爬他们的内容违法,为什么不试试拿
    maomaomao001
        20
    maomaomao001  
       2019-10-16 10:32:08 +08:00
    算了,当我没说
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   4669 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 05:35 · PVG 13:35 · LAX 22:35 · JFK 01:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.