chrome extension : 鼠标点击后，自动生成 cherrio 格式的数据，方便爬虫
shanCW · 2020-02-18 17:37:20 +08:00 · 961 次点击这是一个创建于 1740 天前的主题，其中的信息可能已经有所发展或是发生改变。
实现比较简单：
递归获取父元素。
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