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
}