Turndown 源码分析:二、规则`commonmark-ruiles.js` REV1

简介: Turndown 源码分析:二、规则`commonmark-ruiles.js` REV1
import { repeat } from './utilities'
var rules = {}
// 段落
rules.paragraph = {
  filter: 'p',
  replacement: function (content) {
    // 前后加两个换行
    return '\n\n' + content + '\n\n'
  }
}
// 换行
rules.lineBreak = {
  filter: 'br',
  replacement: function (content, node, options) {
    // 换行的规则在各个编辑器中是不统一的
    // GH 实现只需要一个换行就够,但经典实现需要两个空格加一个换行
    // options.br 用于配置换行符之前应该添加的字符
    return options.br + '\n'
  }
}
// 标题
rules.heading = {
  filter: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
  replacement: function (content, node, options) {
    // 确定标题级别(节点名称第二个字母)
    var hLevel = Number(node.nodeName.charAt(1))
    if (options.headingStyle === 'setext' && hLevel < 3) {
      // 如果是 setext 风格,标题文本下加相同长度的等号或者中划线
      var underline = repeat((hLevel === 1 ? '=' : '-'), content.length)
      return (
        '\n\n' + content + '\n' + underline + '\n\n'
      )
    } else {
      // 如果是 atx 风格,标题前面加上级别等量的井号
      return '\n\n' + repeat('#', hLevel) + ' ' + content + '\n\n'
    }
    // 前后加上两个换行
  }
}
// 引用块
rules.blockquote = {
  filter: 'blockquote',
  replacement: function (content) {
    // 替换掉前导和尾随换行
    content = content.replace(/^\n+|\n+$/g, '')
    // 每行开头加上前缀
    content = content.replace(/^/gm, '> ')
    // 前后加上两个换行
    return '\n\n' + content + '\n\n'
  }
}
// 列表
rules.list = {
  filter: ['ul', 'ol'],
  replacement: function (content, node) {
    // 检查元素是顶级列表还是子列表
    var parent = node.parentNode
    if (parent.nodeName === 'LI' && parent.lastElementChild === node) {
      // 如果是子列表,前面加一个换行,后面不加
      return '\n' + content
    } else {
      // 如果是顶级列表,前后加两个换行
      return '\n\n' + content + '\n\n'
    }
  }
}
// 列表项
rules.listItem = {
  filter: 'li',
  replacement: function (content, node, options) {
    content = content
      .replace(/^\n+/, '') // 移除前导换行
      .replace(/\n+$/, '\n') // 将尾随换行减少为一个
      .replace(/\n/gm, '\n    ') // 曾伽缩进
    // 无序列表的列表项前缀
    var prefix = options.bulletListMarker + '   '
    var parent = node.parentNode
    if (parent.nodeName === 'OL') {
      // 如果是有序列表,获取起始序号
      var start = parent.getAttribute('start')
      // 获取列表项的索引
      var index = Array.prototype.indexOf.call(parent.children, node)
      // 有序号则使用序号,否则使用索引
      prefix = (start ? Number(start) + index : index + 1) + '.  '
    }
    // 如果不是最后一个列表项,并且没有尾随换行,则添加一个
    return (
      prefix + content + (node.nextSibling && !/\n$/.test(content) ? '\n' : '')
    )
  }
}
// 缩进式代码块
rules.indentedCodeBlock = {
  filter: function (node, options) {
    return (
      options.codeBlockStyle === 'indented' &&
      node.nodeName === 'PRE' &&
      node.firstChild &&
      node.firstChild.nodeName === 'CODE'
    )
  },
  replacement: function (content, node, options) {
    // 每一行加缩进,首尾加两个换行
    return (
      '\n\n    ' +
      node.firstChild.textContent.replace(/\n/g, '\n    ') +
      '\n\n'
    )
  }
}
// GH 风格代码块
rules.fencedCodeBlock = {
  filter: function (node, options) {
    return (
      options.codeBlockStyle === 'fenced' &&
      node.nodeName === 'PRE' &&
      node.firstChild &&
      node.firstChild.nodeName === 'CODE'
    )
  },
  replacement: function (content, node, options) {
    // 获取其 CODE 子元素的类名
    var className = node.firstChild.getAttribute('class') || ''
    // 从类名获取语言
    var language = (className.match(/language-(\S+)/) || [null, ''])[1]
    var code = node.firstChild.textContent
    // 确定分隔符的长度,是代码中出现的最大连续分隔字符数量加1
    var fenceChar = options.fence.charAt(0)
    var fenceSize = 3
    var fenceInCodeRegex = new RegExp('^' + fenceChar + '{3,}', 'gm')
    var match
    while ((match = fenceInCodeRegex.exec(code))) {
      if (match[0].length >= fenceSize) {
        fenceSize = match[0].length + 1
      }
    }
    var fence = repeat(fenceChar, fenceSize)
    // 拼装字符串并返回
    return (
      '\n\n' + fence + language + '\n' +
      code.replace(/\n$/, '') +
      '\n' + fence + '\n\n'
    )
  }
}
// 水平线
rules.horizontalRule = {
  filter: 'hr',
  replacement: function (content, node, options) {
   // 使用 options.hr 的样式,前后两个换行
    return '\n\n' + options.hr + '\n\n'
  }
}
// 内联连接
rules.inlineLink = {
  filter: function (node, options) {
    return (
      options.linkStyle === 'inlined' &&
      node.nodeName === 'A' &&
      node.getAttribute('href')
    )
  },
  replacement: function (content, node) {
    // 获取 URL 和标题
    var href = node.getAttribute('href')
    var title = cleanAttribute(node.getAttribute('title'))
    if (title) title = ' "' + title + '"'
    // 拼接到一起
    return '[' + content + '](' + href + title + ')'
  }
}
// 引用链接
rules.referenceLink = {
  filter: function (node, options) {
    return (
      options.linkStyle === 'referenced' &&
      node.nodeName === 'A' &&
      node.getAttribute('href')
    )
  },
  replacement: function (content, node, options) {
    // 获取 URL 和标题
    var href = node.getAttribute('href')
    var title = cleanAttribute(node.getAttribute('title'))
    if (title) title = ' "' + title + '"'
    var replacement
    var reference
    // 根据不同格式构造链接部分和引用部分
    switch (options.linkReferenceStyle) {
      case 'collapsed':
        replacement = '[' + content + '][]'
        reference = '[' + content + ']: ' + href + title
        break
      case 'shortcut':
        replacement = '[' + content + ']'
        reference = '[' + content + ']: ' + href + title
        break
      default:
        var id = this.references.length + 1
        replacement = '[' + content + '][' + id + ']'
        reference = '[' + id + ']: ' + href + title
    }
    // 将引用部分插入到引用列表中,稍后附加到文章末尾
    this.references.push(reference)
    // 返回链接部分
    return replacement
  },
  references: [],
  append: function (options) {
    var references = ''
    // 将引用列表按行连接,一行一个引用,然后清空引用列表
    if (this.references.length) {
      references = '\n\n' + this.references.join('\n') + '\n\n'
      this.references = [] // Reset references
    }
    return references
  }
}
// 斜体
rules.emphasis = {
  filter: ['em', 'i'],
  replacement: function (content, node, options) {
    // 如果内容为空或者空白, 返回空串
    if (!content.trim()) return ''
    // 返回分隔符包围的内容
    return options.emDelimiter + content + options.emDelimiter
  }
}
rules.strong = {
  filter: ['strong', 'b'],
  replacement: function (content, node, options) {
    // 如果内容为空或者空白, 返回空串
    if (!content.trim()) return ''
    // 返回分隔符包围的内容
    return options.strongDelimiter + content + options.strongDelimiter
  }
}
// 内联代码
rules.code = {
  filter: function (node) {
    var hasSiblings = node.previousSibling || node.nextSibling
    var isCodeBlock = node.parentNode.nodeName === 'PRE' && !hasSiblings
    return node.nodeName === 'CODE' && !isCodeBlock
  },
  replacement: function (content) {
    // 如果内容为空或者空白, 返回空串
    if (!content) return ''
    // 去掉所有换行符
    content = content.replace(/\r?\n|\r/g, ' ')
    // 如果以反引号开头或者结尾,需要加填充避免与分隔符连上
    var extraSpace = /^`|^ .*?[^ ].* $|`$/.test(content) ? ' ' : ''
    // 分隔符的长度是代码中出现的最大连续反引号数量加1
    var delimiter = '`'
    var matches = content.match(/`+/gm) || []
    while (matches.indexOf(delimiter) !== -1) delimiter = delimiter + '`'
    // 拼接到一起
    return delimiter + extraSpace + content + extraSpace + delimiter
  }
}
// 图象
rules.image = {
  filter: 'img',
  replacement: function (content, node) {
    // 获取标题、描述和链接并拼接起来
    // 链接不存在时返回空串
    var alt = cleanAttribute(node.getAttribute('alt'))
    var src = node.getAttribute('src') || ''
    var title = cleanAttribute(node.getAttribute('title'))
    var titlePart = title ? ' "' + title + '"' : ''
    return src ? '![' + alt + ']' + '(' + src + titlePart + ')' : ''
  }
}
function cleanAttribute (attribute) {
  // 将连续换行变成单个换行,将行首空格移除。
  return attribute ? attribute.replace(/(\n+\s*)+/g, '\n') : ''
}
export default rules
相关文章
|
6月前
|
JavaScript
Turndown 源码分析:五、节点相关`root-node.js`和`node.js`
Turndown 源码分析:五、节点相关`root-node.js`和`node.js`
69 0
|
6月前
Turndown 源码分析:三、规则集`rules.js` REV1
Turndown 源码分析:三、规则集`rules.js` REV1
53 0
|
6月前
Turndown 源码分析:四、`turndown.js`
Turndown 源码分析:四、`turndown.js`
63 0
|
6月前
|
JavaScript 前端开发
JavaScript标识符(命名规则)
JavaScript标识符(命名规则)
64 0
|
30天前
|
JavaScript 前端开发
JS隐式类型转换规则
【10月更文挑战第9天】 不同的 JavaScript 引擎可能在隐式类型转换的具体实现上存在一些细微差别。理解这些隐式类型转换规则对于正确处理数据和避免错误非常重要。
16 0
|
3月前
|
JavaScript 前端开发
JavaScript的命名规则
JavaScript的命名规则
100 0
|
3月前
|
JavaScript 前端开发
js中的命名规则
js中的命名规则
|
5月前
|
JavaScript 前端开发
JavaScript变量命名规则及关键字详解
JavaScript变量命名规则及关键字详解
|
6月前
|
JavaScript
js的一些运算符规则
js的一些运算符规则
38 1
|
6月前
|
JavaScript 前端开发 数据处理
JavaScript 游戏规则:setTimeout和setInterval的对决
JavaScript 游戏规则:setTimeout和setInterval的对决
46 1