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

// 引入第三方插件import { gfm, tables, strikethrough } from'turndown-plugin-gfm'constturndownService=newTurndownService({ codeBlockStyle: 'fenced' })
// Use the gfm pluginturndownService.use(gfm)
// Use the table and strikethrough plugins onlyturndownService.use([tables, strikethrough])
/**   * 自定义配置（rule名不能重复）   * 这里我们指定 `pre` 标签为代码块，并在代码块的前后加个换行，防止显示异常   */turndownService.addRule('pre2Code', {
filter: ['pre'],
replacement (content) {
return'```\n'+content+'\n```'    }
  })

constqUrl=req.query.url

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

/**  * 获取准确的文章内容  * @param {string} html html串  * @param {string} selector css选择器  * @return {string} htmlContent  */constgetDom= (html, selector) => {
constdom=newJSDOM(html)
consthtmlContent=dom.window.document.querySelector(selector)
returnhtmlContent }

// 比如掘金，内容块的样式名为 .markdown-body，内容里会有 style 标签样式和一些多余的文字，通过原生 dom 操作删掉if (qUrl.includes('juejin.cn')) {
consthtmlContent=getBySelector('.markdown-body')
constextraDom=htmlContent.querySelector('style')
constextraDomArr=htmlContent.querySelectorAll('.copy-code-btn')
extraDom&&extraDom.remove()
extraDomArr.length>0&&extraDomArr.forEach((v) => { v.remove() })
returnhtmlContent }
// 再比如 oschina，内容块的样式名为 .article-detail，内容里会有多余的 .ad-wrap 内容，照样删掉if (qUrl.includes('oschina.net')) {
consthtmlContent=getBySelector('.article-detail')
constextraDom=htmlContent.querySelector('.ad-wrap')
extraDom&&extraDom.remove()
returnhtmlContent }
// 最后匹配通用标签。优先适配 article 标签，没有再用 body 标签consthtmlArticle=getBySelector('article')
if (htmlArticle) { returnhtmlArticle }
consthtmlBody=getBySelector('body')
if (htmlBody) { returnhtmlBody }

// 通过原生api - URL 获取链接的源域名constqOrigin=newURL(qUrl).origin||''// 获取图片、链接的绝对路径。通过 URL 将 `路径+源域名` 转换为绝对路径，不熟悉的同学请自行了解constgetAbsoluteUrl=p=>newURL(p, qOrigin).href// 转换图片、链接的相对路径，不同平台的图片懒加载属性名不一样，需要做特定兼容constchangeRelativeUrl= (dom) => {
if (!dom) { return'<div>内容出错~</div>' }
constcopyDom=dom// 获取所有图片constimgs=copyDom.querySelectorAll('img')
// 获取所有链接constlinks=copyDom.querySelectorAll('a')
// 替换完所有路径返回新 domimgs.length>0&&imgs.forEach((v) => {
/**     * 处理懒加载路径     * 简书：data-original-src     * 掘金：data-src     * segmentfault：data-src     */constsrc=v.src||v.getAttribute('data-src') ||v.getAttribute('data-original-src') ||''v.src=getAbsoluteUrl(src)
   })
links.length>0&&links.forEach((v) => {
consthref=v.href||qUrlv.href=getAbsoluteUrl(href)
   })
returncopyDom }
// 在获取不同平台的文章内容 getBody 方法里，应用 changeRelativeUrl 方法constgetBody= (content) => {
......returnchangeRelativeUrl(htmlContent)
 }

// 底部添加转载来源声明constaddOriginText= (dom) => {
consthtml=dom.innerHTMLconstresHtml=html+`<br/><div>本文转自 <a href="${qUrl}" target="_blank">${qUrl}</a>，如有侵权，请联系删除。</div>`returnresHtml }
// 在获取不同平台的文章内容 getBody 方法里，应用 addOriginText 方法constgetBody= (content) => {
......returnaddOriginText(changeRelativeUrl(htmlContent))
 }

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

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