大众点评评论标签替换文字问题

大众点评评论标签替换文字问题

做大众点评评论爬虫的时候发现评论内容会有部分文字被 b标签替换掉
如图:

一看，这是什么鬼，没见过啊，怎么办，然后选中一个 b标签，看到右边的css，如图

注意到background-image：url 这里比较可疑，打开看一下，发现是这样的：

查看一下源码，发现是这样的

看到这个，我们应该就明白了网站是用了某种规则把这个svg文件里面的文字映射到了评论里，这个规则显然和b标签的class相关，但是有什么关系呢？
OK，我们要找到这个class在哪里定义的，从源码中，我们可以找到一个css文件
http://s3plus.meituan.net/v1/mss_0a06a471f9514fc79c981b5466f56b91/svgtextcss/e9678967cc5676f6fe1178d35d5fba81.css
打开是这样的：
在这里插入图片描述

比如：我搜索pu219(在我的测试中，对应“名”这个字，见第一张图)，会搜索到

pu2l9{background:-504.0px -919.0px;}

接着我们就要看这个background是如何对应到svg的“名”这个字上的
我们搜索svg文件的源码，查找“名”

<textPath xlink:href="#23" textLength="532">屯震筋折共谎送仓效吧著科识锣河梁剩肉富踢测克绵核子时汁潮创束治惊俊美症拿名勤</textPath>

我们发现“名”是第23行的第37个字，如何把-504.0px -919.0px对应过来呢
504px/14px=36，这个14px就是字的宽度(见第一张图)，这样我们就知道了定位到了某一行的子的位置
然后我们需要找字的行数，这个没办法用919px直接除以字的高度，首先我们看svg文件能发现行与行之间是有间隔的，甚至间隔还不同，于是我花了几分钟掌握了svg定位的基础知识，发现svg源码里的
标签

<path id="39" d="M0 1570 H600"/>
<path id="23" d="M0 942 H600"/>

其中的1570代表高度，但是你会说，这个919在源码里就没有，博主你在骗我。
这个css里的高度和svg源码里的高度差值是23，比如919px对应的就是942，这个各位同学可以都找几个例子试一下。