chrome extension : 鼠标点击后，自动生成 cherrio 格式的数据，方便爬虫

[shanCW]

实现比较简单：

递归获取父元素。

chrome 插件下载拖拽就能使用： 如果有帮助还请点个 star

https://github.com/shancw96/chrome_extensions/tree/master/webCrawer_hepler

核心代码

/**
 * 获取当前节点的所有父节点
 * @param {HTMLDOM} node 节点
 * @param {Array} resArr 结果数组
 */
const getAllParentNode = (node, resArr = []) => node.tagName === 'BODY' ? resArr : getAllParentNode(node.parentNode, [node, ...resArr])
/**
 * 点击后获取 cheerio 爬虫格式 当前节点定位
 * @param {HTML event} e 
 */

const locateClickedDOM = e => {
    e.preventDefault()
    const nodeArr = getAllParentNode(e.target) //cur cur.par cur.par.par
    // nodeArr -> String  
    //$('最外层的 parent clas id').children('次外层 parent + class id').....children('cur .class #id')
    let res = nodeArr.reduce((prevString, curNode, index) => {
        //className_str 获取
        let className_str = ''
        curNode.classList.forEach(className => {
            className_str += `.${className}`
        })
        //拼装当前 node str
        const curString = `${index === 0 ? '$' : '.children'}('${curNode.localName}${!!curNode.id ? '#' + curNode.id : ''}${className_str}')`
        return prevString += curString
    }, '')

    const tag = e.target.alt ? e.target.alt : e.target.innerHTML
    //输出
    console.log('当前节点名称：' + tag + '\n' + res)
    return
}

代码已更新

function locateClickedDOM(e) {
    e.preventDefault()
    // 获取当前的节点
    // 递归获取所有的符合要求的父节点,数组返回
    const matchedArr = getMatchedParents(e.target)
    //整理需要返回的数组，生成cheerio 格式的数据
    const cheerioData = createCheerioString([
        ...matchedArr, [e.target]
    ])
    console.log(cheerioData)
    return

    function getMatchedParents(node, resArr = []) {
        const $curNodeParent = $(node).parent()
        //如果当前节点的父节点为body 那么结束递归
        if ($curNodeParent.prop('tagName') === 'BODY') return resArr
        //获取当前节点的父节点，以及父节点前面的节点，将父节点放在结果数组中
        let prevArr = $curNodeParent.prevAll().filter($curNodeParent.prop('tagName')).toArray()
        return getMatchedParents($curNodeParent[0], [
            [$curNodeParent[0], ...prevArr], ...resArr
        ])
    }

    function createCheerioString(nodeArr) {
        return nodeArr.reduce((combinedData, curNodeArr, index) => {
            //确定第一个节点 ：从body开始计算 ${'body'}.children(firstNode).eq(arrLen-1)
            //非第一个节点：.children(firstNode).eq(arrLen-1)
            let curData = `${index===0 ? `$('body')`:''}.children('${curNodeArr[0].localName}').eq(${curNodeArr.length-1})`
            return combinedData += curData
        }, '')
    }

}