网页 抓取 innertext 试题( 共建,学习和探索.效果演示客户端思路先理 )

　　网页 抓取 innertext 试题(

共建,学习和探索.效果演示客户端思路先理

)

　　

　　近年来，许多技术博客和技术社区出现，许多技术同事开始建立自己的博客。我们可以将博客同步到不同的技术平台，但随着技术平台的增加，我们文章同步时间将越来越多，然后有一个工具快速释放博客到另一个平台？或者做它的工具，您可以直接将HTML转换为技术平台以识别“语言”直接发布？

　　我们都知道程序员最喜欢的写作的“语言”是Makedown，而且大多数技术社区目前都支持Makedown语法，所以只要有Makedown，我们就可以快速同步到不同的技术平台。

　　也许有人会说，我们写博客直接写入makedown语法？它确实可以满足需求，但缺点是我们的本地必须保存一个Makedown文件，如果博客内容涉及图片，我们仍然需要维护一个IMG目录，以便每次有折扣文章文章或者这将是非常麻烦的，因此我们开发了一个工具，它会自动攀升HTML，一键入Makedown。通过这种方式，我们可以“肆无忌惮”发布博客。

　　你会收获

　　github地址作者将把它附加到文章的末尾，有兴趣的朋友可以在一起，学习和探索。

　　效果演示

　　

　　客户思考

　　我想：

　　

　　为什么选择翻天下

　　客户端中最重要的一步是MD的HTML，在其中我们使用倾斜。

　　为什么要使用趋势，如下：

　　具体实现

　　 // 引入第三方插件

import { gfm, tables, strikethrough } from 'turndown-plugin-gfm'

const turndownService = new TurndownService({ codeBlockStyle: 'fenced' })

// Use the gfm plugin

turndownService.use(gfm)

// Use the table and strikethrough plugins only

turndownService.use([tables, strikethrough])

/**

* 自定义配置（rule名不能重复）

* 这里我们指定 `pre` 标签为代码块，并在代码块的前后加个换行，防止显示异常

*/

turndownService.addRule('pre2Code', {

filter: ['pre'],

replacement (content) {

return '```\n' + content + '\n```'

}

})

　　额外的功能

　　支持自动采集链接文章标题，不需要手动转到原创副本。

　　服务器

　　我们使用使用node.js的服务器，用前端写入服务器，体验杠杆。

　　想法

　　我想：

　　

　　前端交付链路地址的具体实现

　　它在此处使用节点的自行连接语法，我们使用get表单通过，使用查询

　　 const qUrl = req.query.url

　　获取html字符串

　　通过请求

　　我们被要求请求

　　 request({

url: qUrl

}, (error, response, body) => {

if (error) {

res.status(404).send('Url Error')

return

}

// 这里的 body 就是文章的 `html`

console.log(body)

})

　　得到不同的dom

　　根据不同的平台域名

　　由于许多技术平台，每个平台的文章 C​​ontent标记，样式名称或ID会有差异，这需要兼容。

　　首先使用JS-DOM模拟操作DOM，包装方法

　　/**

* 获取准确的文章内容

* @param {string} html html串

* @param {string} selector css选择器

* @return {string} htmlContent

*/

const getDom = (html, selector) => {

const dom = new JSDOM(html)

const htmlContent = dom.window.document.querySelector(selector)

return htmlContent

}

　　与不同的平台兼容，应用不同的CSS选择器

　　// 比如掘金，内容块的样式名为 .markdown-body，内容里会有 style 标签样式和一些多余的复制代码文字，通过原生 dom 操作删掉

if (qUrl.includes('juejin.cn')) {

const htmlContent = getBySelector('.markdown-body')

const extraDom = htmlContent.querySelector('style')

const extraDomArr = htmlContent.querySelectorAll('.copy-code-btn')

extraDom && extraDom.remove()

extraDomArr.length > 0 && extraDomArr.forEach((v) => { v.remove() })

return htmlContent

}

// 再比如 oschina，内容块的样式名为 .article-detail，内容里会有多余的 .ad-wrap 内容，照样删掉

if (qUrl.includes('oschina.net')) {

const htmlContent = getBySelector('.article-detail')

const extraDom = htmlContent.querySelector('.ad-wrap')

extraDom && extraDom.remove()

return htmlContent

}

// 最后匹配通用标签。优先适配 article 标签，没有再用 body 标签

const htmlArticle = getBySelector('article')

if (htmlArticle) { return htmlArticle }

const htmlBody = getBySelector('body')

if (htmlBody) { return htmlBody }

　　转换图像和链接的相对路径是绝对路径，可以方便地找到源路径

　　// 通过原生api - URL 获取链接的源域名

const qOrigin = new URL(qUrl).origin || ''

// 获取图片、链接的绝对路径。通过 URL 将 `路径+源域名` 转换为绝对路径，不熟悉的同学请自行了解

const getAbsoluteUrl = p => new URL(p, qOrigin).href

// 转换图片、链接的相对路径，不同平台的图片懒加载属性名不一样，需要做特定兼容

const changeRelativeUrl = (dom) => {

if (!dom) { return '内容出错~' }

const copyDom = dom

// 获取所有图片

const imgs = copyDom.querySelectorAll('img')

// 获取所有链接

const links = copyDom.querySelectorAll('a')

// 替换完所有路径返回新 dom

imgs.length > 0 && imgs.forEach((v) => {

/**

* 处理懒加载路径

* 简书：data-original-src

* 掘金：data-src

* segmentfault：data-src

*/

const src = v.src || v.getAttribute('data-src') || v.getAttribute('data-original-src') || ''

v.src = getAbsoluteUrl(src)

})

links.length > 0 && links.forEach((v) => {

const href = v.href || qUrl

v.href = getAbsoluteUrl(href)

})

return copyDom

}

// 在获取不同平台的文章内容 getBody 方法里，应用 changeRelativeUrl 方法

const getBody = (content) => {

...

...

return changeRelativeUrl(htmlContent)

}