chrome extension : 鼠标点击后，自动生成 cherrio 格式的数据，方便爬虫
shanCW 2020-02-18 17:37:20 +08:00 1173 次点击这是一个创建于 2144 天前的主题，其中的信息可能已经有所发展或是发生改变。
实现比较简单：
递归获取父元素。
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 } 第 1 条附言 2020-02-23 15:46:20 +08:00
代码已更新
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 }, '') } } 
目前尚无回复
Select Language