从零开发一款自动提取网页html并一键转换为md文件的工具(vue源码版)

徐小夕 等级 494 0 0

从零开发一款自动提取网页html并一键转换为md文件的工具(vue源码版)

最近几年涌现出了很多技术博客和技术社区, 也有很多技术同仁开始打造自己的博客, 我们可以把自己的博客同步到不同的技术平台, 但是随着技术平台的增多, 我们文章同步所花费的时间会越来越多, 那么有没有一个工具能快速的将博客发布到不同的平台呢? 或者有没有一个工具, 可以把html直接转化为技术平台能够识别的“语言”直接发布呢?

我们都知道程序员最爱的写博客的“语言”就是makedown, 并且目前大部分的技术社区都支持makedown语法, 所以说只要有makedown, 我们就能快速的同步到不同的技术平台.

也许有人会说, 我们写博客直接用makedown语法写不就好了? 的确这样做可以满足需求, 但缺点就是我们本地必须要保存一份makedown文件, 如果博客内容涉及到图片, 我们还需要维护一个img目录, 这样每次在不同技术社区发布文章还是会很麻烦, 所以综上我们开发了一款自动爬取html内容并一键转换为makedown的工具, 这样我们就可以“肆无忌惮的”发布博客了.

你将收获

  • turndown的使用技巧
  • vue + nuxt项目开发方式
  • nodejs爬虫相关应用

github地址笔者将在文末附上, 感兴趣的朋友可以一起共建, 学习和探索.

效果演示

从零开发一款自动提取网页html并一键转换为md文件的工具(vue源码版)

客户端

思路

先理一下思路:

  • 输入一个链接地址
  • 获取服务端返回的 html
  • html 串 转换为 md
  • 同步显示预览到编辑器中

从零开发一款自动提取网页html并一键转换为md文件的工具(vue源码版)

为什么选择 turndown

客户端最重要的一步是 htmlmd,这里我们使用的 turndown

为什么使用 turndown 呢,原因如下:

  • Talk is cheap, Show me the code. 做技术文章很关键的一个功能是 代码块,没有代码的文章是没有灵魂的。比较过几个 html2md 插件,turndown 的代码块显示效果和兼容性最好。
  • turndown 也支持自定义规则,灵活可变,可自定义各种语法标签和匹配规则。
  • turndown 还支持第三方插件 turndown-plugin-gfm,支持集成 GFMMD 的超集 GitHub Flavored Markdown)、tablestrikethrough等语法。

具体实现

  // 引入第三方插件
  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,用前端的框架写服务端,体验杠杠的。

思路

先理一下思路:

  • 获取前端传递的链接地址
  • 通过请求获取 html
  • 根据不同平台域名获取不同的 dom
  • 转换图片和链接的相对路径为绝对路径
  • html 底部添加转载来源声明
  • 获取文章的标题 title
  • 返回 titlehtml 给前端

从零开发一款自动提取网页html并一键转换为md文件的工具(vue源码版)

具体实现

获取前端传递的链接地址

这里直接使用 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 '<div>内容出错~</div>' }
  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)
}

底部添加转载来源声明,以防侵权

这个就不多做解释了,很简单。

// 底部添加转载来源声明
const addOriginText = (dom) => {
  const html = dom.innerHTML
  const resHtml = html + `<br/><div>本文转自 <a href="${qUrl}" target="_blank">${qUrl}</a>,如有侵权,请联系删除。</div>`
  return resHtml
}

// 在获取不同平台的文章内容 getBody 方法里,应用 addOriginText 方法
const getBody = (content) => {
  ...
  ...
  return addOriginText(changeRelativeUrl(htmlContent))
}

获取文章的标题 title

// 获取文章的 title
const getTitle = (content) => {
  const title = getDom(content, 'title')
  if (title) { return title.textContent }
  return '获取标题失败~'
}

返回 titlehtml 给前端

request({
  url: qUrl,
  headers: {}
}, (error, response, body) => {
  if (error) {
    res.status(404).send('Url Error')
    return
  }
  // 设置 json 响应类型
  res.type('text/json')
  const json = {
    code: 1,
    title: getTitle(body),
    html: getBody(body)
  }
  res.status(200).send(json)
})

实际应用

这个开源工具的应用场景非常广泛, 我们几乎可以将任何网页链接转换为md内容, 同步到自己的博客或者内容管理平台, 但是大家需要有版权意识, 做一个遵纪守法的好“网民”.

支持环境

现代浏览器及 IE11。

从零开发一款自动提取网页html并一键转换为md文件的工具(vue源码版)
IE / Edge
从零开发一款自动提取网页html并一键转换为md文件的工具(vue源码版)
Firefox
从零开发一款自动提取网页html并一键转换为md文件的工具(vue源码版)
Chrome
从零开发一款自动提取网页html并一键转换为md文件的工具(vue源码版)
Safari
从零开发一款自动提取网页html并一键转换为md文件的工具(vue源码版)
Opera
IE11, Edge last 2 versions last 2 versions last 2 versions last 2 versions

参与贡献

我们非常欢迎你的贡献,你可以通过以下方式和我们一起共建 😃

收藏
评论区

相关推荐

练习父组件调用子组件方法----发表评论案例
<DOCTYPE html <html lang"en" <head <meta ch
Golang高并发抓取HTML图片
版权所有,转载请注明:http://www.lenggirl.com/language/gopicture.html(https://links.jianshu.com/go?tohttp%3A%2F%2Fwww.lenggirl.com%2Flanguage%2Fgopicture.html) 使用准备 1.安装Golang 2.
02-Vue入门之数据绑定
02Vue入门之数据绑定 02Vue入门之数据绑定 2.1. 什么是双向绑定? Vue框架很核心的功能就是双向的数据绑定。 双向是指:HTML标签数据 绑定到 Vue对象,另外反方向数
ajax调接口处理表格(easyExcel)
ajax调接口处理表格 show you my codes. 页面新增按钮 html <DOCTYPE html <html lang"en" <head <meta httpequiv"ContentType" content"text/html; charsetGB2312"/ <title中登网信息导入</title <
一个免费的开源的html转markdown语法的工具
一个免费的开源的html转markdown语法的工具 大家好,我是待兔,今天为大家分享一个由 www.helloworld.net 网站开发并开源的一个非常好用的工具 html2md 现在好的技术文章确实多,每天各种技术群里,各种技术社区,有很多质量非常好的技术文章,于是我们就收藏了,可是问题来了,我们收藏到哪呢? 怎么收藏呢? 1. 微信群里发的文
从零开发一款自动提取网页html并一键转换为md文件的工具(vue源码版)
最近几年涌现出了很多技术博客和技术社区, 也有很多技术同仁开始打造自己的博客, 我们可以把自己的博客同步到不同的技术平台, 但是随着技术平台的增多, 我们文章同步所花费的
vue h5 对接支付宝,微信支付,微信js支付
vue h5 实现支付(支付宝,微信) h5端实现支付难度不大,只是有些小的点需要注意下,其他的看文档撸就行了。 支付宝很简单,后端返回一个 html ,前端插入调用就行了,微信支付分两种:1、微信内支付(jsapi,微信内浏览器)2、微信外支付(h5支付)。 一、支付宝支付 // 前端啥都不用管,交给后端去干,返回 html 调用点击就好了 /
【Electron】electron-vue 借助 element-ui UI 库助力桌面应用开发
前面文章我们讲过 electron 让可以用 HTML、JS、CSS 开发桌面应用程序。而 electronvue 是一个结合了 electron 与 vue 的套件。这样我们就能方便地使用 vue 快速开发桌面应用。但是,vue 只是在 js 这层面做了大量的便捷的操作。对 UI 并未过多涉及。此时如果您在开发过程中自己实现一套统一主题的 UI 视觉效果
Python Django开发 经验技巧总结(一)
1.前后台的数据传递view HTML:使用Django模版views.py代码:pythonfrom django.shortcuts import renderdef main_page(request): data 1,2,3,4 return render(request, 'index.html', {'data
VUE3(七)vue项目抽离.vue文件中的js、css代码
平常再做开发的时候,一般情况下不会将html,js,css代码写到一个文件中。基本上都会写在各自对应的文件中,然后再引入即可。那么在VUE中我们如何抽离vue文件中的js,与css代码呢? 1:抽离javascriptHome.vue<template <div <div :style"{ padding: '24px', back
js去除字符串
js去除字符串js<DOCTYPE html<html<head <title</title</head<body</body<script type"text/javascript" function delHtmlTag(str){   return str.replace(/<^/g,""); } var s
天哪!几行js代码就可以实现拳皇小游戏
前言今天,我们用原生JS实现一个拳皇人物位置控制的小效果。话不多说,我们赶紧来看下如何实现吧!效果(非静止八神)分别按W、S、A、D键可实现位置移动,并且效果真实。源码html与css很简单,主要是js中有几点需要注意的。<!DOCTYPE html <html lang"en" <head  <meta charset"UTF8"  <title游
前端培训-Vue专题之Vue基础
简介特点:MVVM框架,双向绑定,数据驱动,单页面,组件化。 区别Vue 和 jQuery 的区别:不直接操作DOM,而是操作数据。案例:Hello World 你好,世界HTML代码:xml<h1msg</h1jQuery实现javascript$("h1").text("你好,世界");Vue 实现javascriptthis.msg '你好,世界'
程序员博客发文利器-html2md 更新指南
背景介绍html2md 是由 helloworld开发者社区 开源的一款轻量级功能强大的html转md工具,纯前端开发,不需要后端接口( NodeJS赋能),支持多平台,一键将文章链接转换为md,方便大家收藏和保存文章。界面如下:,欢迎 Star相关介绍:技术实现 1.技术栈 vue 前端三剑客之一,主张最少,具有高度灵活性的渐进式框架 nu
MyBatis-Plus
一、MyBatisPlus本文转自 https://www.cnblogs.com/lyh/p/12859477.html,如有侵权,请联系删除。 1、简介  MyBatisPlus 是一个 Mybatis 增强版工具,在 MyBatis 上扩充了其他功能没有改变其基本功能,为了简化开发提交效率而存在。官网文档地址:   https://mp.baomid