最近公司要求实现这么一个需求绞尽脑汁终于写了出来:实现了页面内所有的抓取,还有一点小问题需要优化;
下面直接上代码,不废话。
1 // * 2 // * 抓取html页面body中所有文本信息 3 // * return string[] 4 // * / 5 function getAllText() { 6 alert("调用了getAllText()函数!"); 7 // 直接获取所有body中的dom对象 8 var allDoms = document.body.getElementsByTagName('*'); 9 10 // 定义数组用于返回 11 var array = []; 12 13 // 循环所有dom对象进行处理 14 for (var i = 0; i < allDoms.length; i++) { 15 16 // 取出当前dom对象的html信息 17 var html = allDoms[i].innerHTML; 18 // 取出当前dom对象的所有子对象children 19 var childrenDoms = allDoms[i].children; 20 21 for (var j = 0; j < childrenDoms.length; j++) { 22 // 循环所有子对象,并将子对象的内容从html中移除 23 html = html.replace(childrenDoms[j].outerHTML, ''); 24 } 25 26 // 如果html还剩余内容则继续处理 27 if (html) { 28 // 利用正则表达式去除多余内容 29 // 四个正则表达式分别取出内容为: 30 // 1:样式内容<style>*</style>; 31 // 2: 脚本内容 <script>*</script> 32 // 3:html标签内容 <*> 33 // 4:所有不可见字符,例如 , , 等等 34 // 风险: 如果文本内容中也有<xxx>,也会被剔除,暂时没有解决方案,如果不剔除html标签内容会有很多无用数据 35 html = html.replace(/<style.*?>.*?</style>/ig, '').replace(/<script.*?>.*?</script>/ig, '').replace(/</?[^>]*>/g, '').replace(/s/g, ''); 36 if (html) { 37 // 将字符筛选完毕后如果还有剩余内容则放入结果数组中 38 array.push(html); 39 } 40 } 41 } 42 return array; 43 }
下面我们在Chrome浏览器中测试一下效果:
随意进入一个页面如下:
进入开发者工具页面将刚才的代码粘贴只控制台并且调用getAllText()