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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1867 天前的主题，其中的信息可能已经有所发展或是发生改变。

输出是乱序，阅读是顺序：

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

2019-10-15 20:13:03 +08:00

哪一页啊，来一张效果图。

creedowl

2019-10-15 20:15:03 +08:00 via Android

我猜是字体

learnshare

2019-10-15 20:20:47 +08:00

这不简单的定位么
看标点基本都是全角的，所以单页内乱序，然后根据网格生成坐标就可以了

Wincer

2019-10-15 20:24:04 +08:00 via Android

主要是防爬虫，穿插了很多没用的字符，再隐藏掉。https://imweb.io/topic/595b7161d6ca6b4f0ac71f05

bigriverhorse

2019-10-15 20:25:51 +08:00 via Android

楼主，这个还是勉强能连在一起猜，你去看看大众点评的餐厅介绍和用户评价，会大开眼界

okwork

2019-10-15 20:32:30 +08:00

@gIrl1990 发不出完整的链接，你把这个拼起来就可以看了

https 冒号 //e.dangdang 点 com/pc/reader/index.html?id=19004 （数字太多敏感词，id 接上） 65429

exip

2019-10-15 20:32:30 +08:00 via Android

楼主也可以看看天眼查，一样的方法。
猜测是用字体实现的，忘记在哪看过这种方法了。

okwork

2019-10-15 20:38:46 +08:00

@creedowl 爬虫靠猜基本就跪了，说明反趴效果好啊。

初略看了下，猜测是后台打碎存储的，每个字在前端重新排列。这个反趴效果几乎就是无解了，就不知道后台负载是不是很大。

Rwing

2019-10-15 20:56:00 +08:00

其实不菲啥劲，横纵坐标间距都是固定的，花点时间就能复原

gIrl1990

2019-10-15 21:09:41 +08:00

@okwork 我是说图，截图，不是链接。

dremy

2019-10-15 22:00:11 +08:00 via iPhone

截图后 OCR 了解一下

ochatokori

2019-10-15 22:15:17 +08:00 via Android

bottom 和 left 就定位了啊

你把 span 按照这两个属性排序的丢到网格里面不就好了
后端也不是一定要乱序储存，输出的时候先定位再打乱给 html 完全可以吧

nlysh007

2019-10-15 22:47:57 +08:00

left 升序 bottom 降序排下就还原了吧，，也就分段要多考虑下...

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

2019-10-15 23:27:33 +08:00

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

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

我认为当当应该提高难度，同一行列也用不同的 css，css 里面在加上偏移。

learnshare

2019-10-15 23:50:59 +08:00

@imdong 你这要搞得人家本周加班改版上线

maomaomao001

2019-10-16 00:14:45 +08:00

我有点搞不懂了，这些企业也明明不算是小企业了，他们为什么不正当搞自己的本身业务，被爬了，或者有人犯法了，让他们受到惩罚，助力完善相关法律法规不好吗，为什么会搞出这么多奇奇怪怪的定西

axwz88

2019-10-16 01:30:00 +08:00 via Android

@maomaomao001 你这逻辑不就像女人被猥亵怪她穿的太性感吗，本身别人网站条约里写明不让爬虫爬，有人爬自然是非法访问，相比于靠法律制约还是想怎么反爬来的实在

maomaomao001

2019-10-16 10:31:57 +08:00

@axwz88 到底是怎么看出这种逻辑的。。。。我表达的明明是
它（比如百度腾讯阿里）作为不那么小的企业，为什么不试着推进更加规范（正常）的商业模式，
我不太相信如果支付宝被黑了他们仅仅是修复漏洞完事儿。。。肯定不会这样吧
既然爬他们的内容违法，为什么不试试拿

maomaomao001

2019-10-16 10:32:08 +08:00

算了，当我没说