我要投稿

怎么提取网站源码-从零开始开发一款手动提取网页html并一键转换为md文件的工具（vue源码版）

bendan520 网站源码

2023-08-29 0 9,096 百度已收录

进不了网站？换个网络试试！

近年来，出现了很多技术博客和技术社区，很多技术同事也开始建立自己的博客。我们可以将自己的博客同步到不同的技术平台，而随着技术平台的增多，同步我们的文章所花费的时间也会越来越多，那么有没有一种工具可以快速将博客发布到不同的平台呢？或者有没有一个工具可以直接将HTML转换成技术平台可以识别的“语言”并直接发布？

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

也许有人会说怎么提取网站源码，我们写博客不能只用makedown语句吗？确实，这样可以满足需求，但是缺点是我们必须在本地保存一个makedown文件。如果博客内容涉及图片，我们也需要维护。一个img目录，所以每次要在不同的技术社区发布文章还是很麻烦的，所以综上，我们开发了一个工具，可以手动爬取html内容，一键转换成makedown，这样我们就可以发布博客了”肆无忌惮地”起来。

你将会收获

作者会在文末附上github地址。有兴趣的学生可以一起搭建、学习和探索。

功效展示

客户方理念

首先想一下：

为什么选择夜床

客户端最重要的一步就是将html转换成md，这里我们使用翻车。

为什么要使用调低？原因如下：

执行

  // 引入第三方插件
  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，我们使用后端框架来编写服务器来体验很棒的体验。

思路

首先想一下：

执行

获取后端传递过来的链接地址

这里我们直接使用node内置的句型，我们使用get方法来传递，使用query即可

const qUrl = req.query.url

根据请求获取html字符串

这里我们使用request来发出请求

 request({
   url: qUrl
 }, (error, response, body) => {
   if (error) {
     res.status(404).send('Url Error')
     return
   }
   // 这里的 body 就是文章的 `html`
   console.log(body)
 })

根据不同平台域名获取不同的dom

因为技术平台很多，每个平台的文章内容标签、样式名称或者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)
 }