websect的局限性

websect

• 这几天一直在完善 websect的功能，现在基本上可以说websect的功能是比较完善的了，爬取网页的速度比 cheerio还要快，经过这几天的爬取测试，同时也发现了websect的局限性
• 如果一个网页，全是使用div来书写，那么websect对于这种网页无能为力，不止这样，cheerio也无能为力，那么有解决办法吗？有，但是解决办法的效率不高，这一点很重要，那有没有效率更高的解决办法，我目前还想不出来
• 所以为了适合数据的爬取，一个网页应该具备这样的特征，要使用各种各样的标签，W3C为此标准化了很多标签，header，footer，main，aside，section之类，不要动不动就全部使用div，可以有div，但是不能过多，一个div里边要尽可能的减少嵌套多个div，要经常使用p，span，a，ul，li这些，标签的类型越多，那么数据爬取的速度会越快
• 实际上，在 websect的使用中，检索的速度是有差别的：标签检索 > id检索 > class检索，标签检索的速度最快，在cheerio中也是这样，所以检索的时候要优先使用标签进行检索
• 我之前还一直不太明白为什么W3C要提供那么多的新标签，div是万能的，基本上可以这么说，但是为什么还要提供header，footer之类的标签呢？现在我多多少少有些理解了，为了能够让浏览器快速识别dom，并且对于爬取数据非常的友好
• 如果能够形成一个良好的网页书写习惯，尝试使用新标签，尝试使用不同的标签书写网页，而不是一上来就是使用div，或者说全部使用div，这样websect的局限性就会弱化到最小，甚至不会存在什么局限性
• 因此，养成一个良好的，科学的网页书写习惯很重要

可能你会问，为什么会有局限性？

• 为了比较详细的解释这个问题，咱们举个例子：

<div class="container">
    <div class="header">
        <div class="title">hello world</div>
        <div class="nav">
            <a href="">nav1</a>
            <a href="">nav2</a>
            <a href="">nav3</a>
        </div>
        <div class="slider">
            <!-- 这是 slider的内容 -->
        </div>
    </div>
    <div class="content">
        <!-- 这是只要内容 -->
    </div>
    <div class="footer">this is a footer</div>
</div>

• 假设现在我想获取 div.header的内容，即：

<div class="header">
    <div class="title">hello world</div>
    <div class="nav">
        <a href="">nav1</a>
        <a href="">nav2</a>
        <a href="">nav3</a>
    </div>
    <div class="slider">
        <!-- 这是 slider的内容 -->
    </div>
</div>

• 你会怎么获取，假设我想使用正则表达式，像下面这样：

var reg = /<div class="header">(.*)<\/div>/g

• 匹配之后的结果是：

	<div class="header">
        <div class="title">hello world</div>
        <div class="nav">
            <a href="">nav1</a>
            <a href="">nav2</a>
            <a href="">nav3</a>
        </div>
        <div class="slider">
            <!-- 这是 slider的内容 -->
        </div>
    </div>
    <div class="content">
        <!-- 这是只要内容 -->
    </div>
    <div class="footer">this is a footer</div>
</div>

• 然后你发现有些多了，于是开启非贪婪模式

var reg = /<div class="header">(.*?)<\/div>/g

• 于是你会匹配到这个：

<div class="header">
        <div class="title">hello world</div>

• 这个时候你才明白，这不是一个正则表达式能够解决的，有解决办法吗？有，但是效率不高

// 先定义一个函数：getdiv
function getdiv(s){
    var  arrs = s.split(/\n\s+/g)
    // 用来计数
    var count = 0
    var closeindex = null,openindex = null
    var narrs = null
    var openreg = null,closereg = null,contentreg = null
    for(let i=0,len=arrs.length;i<len;i++){
    	// 开始标签
        openreg = /<([^\/]).*>/g
        // 结束标签
        closereg = /<\/(.+?)>/g
        // 内容标签，就是双标签，或者单标签
        contentreg = /<(.+?)>(.+?)<\/(.+?)>/g
        if(contentreg.test(arrs[i])){
        	// 遇到内容标签直接跳过
            continue
        }
        if(openreg.test(arrs[i])){
            if(openindex === null){
                openindex = i
            }
            // 遇到一个开始标签，计数器加1
            count++
        }
        if(closereg.test(arrs[i])){
        	// 遇到一个结束标签，计数器减1
            count--
            closeindex = i
        }
        if(!count && i === closeindex){
        	// 计数器为0.说明这是一个合理的标签
        	// 然后进行截取
            narrs = arrs.slice(openindex,closeindex+1)
            break
        }
    }
    return narrs.join("\n")
}
// 将getdiv函数对贪婪模式下的 div.header进行分析，可以得到

<div class="header">
    <div class="title">hello world</div>
    <div class="nav">
        <a href="">nav1</a>
        <a href="">nav2</a>
        <a href="">nav3</a>
    </div>
    <div class="slider">
        <h1>this is slider</h1>
    </div>
</div>

• 可以看到成功获取了 div.header，但是方法很复杂，如果可以，要是能直接使用正则表达式检索出来那是最好的
• 我之前在考虑要不要把这个方法纳入到 websect里边，但是现在不用了，因为他违背了 websect 高效的特征
• 爬虫工具应该具备这几样特点：爬取数据精准，爬取数据高效
• 再次强调，要尝试使用新的标签，不同的标签书写网页，这也符合W3C的观点，同时，websect的局限性可以被忽略