npm 包 cfi-algebra-manipulator 使用教程-JavaScript中文网-JavaScript教程资源分享门户

CFI Algebra 是一种 ePub 电子书格式中用来表示内容的定位系统。CFI (Continous Pagination Identifier) 由一系列的字符组成，用来描述电子书中的一个特定位置或一个片段。因此，CFI Algebra Manipulator 这个 npm 包就是用来操作 ePub 电子书中 CFI Algebra 的。

本教程将向您介绍如何使用 npm 包 cfi-algebra-manipulator，使用前请确保已经正确安装 Node.js 和 npm。

安装

在终端执行以下命令：

npm install cfi-algebra-manipulator

使用

cfi-algebra-manipulator 的基本用法

const CfiManipulator = require('cfi-algebra-manipulator')

const cfi = "epubcfi(/6/14!/4/1:0)"
const manipulator = new CfiManipulator(cfi)

console.log(`Element CFI: ${manipulator.getElementCfi()}`)
console.log(`Leaf Node CFI: ${manipulator.getLeafNodeCfi()}`)
console.log(`Range CFI: ${manipulator.getRangeCfi(2, 5)}`)

getElementCfi()

获取 element 的 CFI。

const CfiManipulator = require('cfi-algebra-manipulator')
const cfi = "epubcfi(/6/14!/4/1:0)"
const manipulator = new CfiManipulator(cfi)

const elementCfi = manipulator.getElementCfi() // /6/14!/4

getLeafNodeCfi()

获取 leaf node 的 CFI。

const CfiManipulator = require('cfi-algebra-manipulator')
const cfi = "epubcfi(/6/14!/4/1:0)"
const manipulator = new CfiManipulator(cfi)

const leafCfi = manipulator.getLeafNodeCfi() // /6/14!/4/1:0

getRangeCfi(start, end)

获取 range 的 CFI。

const CfiManipulator = require('cfi-algebra-manipulator')
const cfi = "epubcfi(/6/14!/4/1:0)"
const manipulator = new CfiManipulator(cfi)

const rangeCfi = manipulator.getRangeCfi(3, 5) // /6/14!/4/[3,5]

深入学习

CFI Algebra 的定义

CFI 是 ePub 电子书标准定义的一套坐标系统，它用来精确定位文档中的一个位置或一个片段。

CFI Algebra 由两个部分组成：

Spine Index：代表此位置所在的 spine 中的索引。
Path Component：代表从 spine 起始点开始，一直到此处为止的 DOM 树中的路径。这个路径只包含元素的 ID 和类名。

例如，一个 epub 版本的 Hamlet 包含如下书脊：

-- -------------------- ---- -------
------ ----------
  -------- ---------------
  -------- ---------------
  -------- ---------------
  -------- --------------
  -------- --------------
  -------- --------------
  -------- --------------
  -------- --------------
  -------- --------------
--------

如果想要定位到 Hamlet 中 Act1 Scene 2 的第一句台词，就可以使用如下的 CFI：

epubcfi(/6/14!/4/1:0)

其中的数字分别代表 spine index 和 path component。在这个示例中，第 6 个 spine 是 "act1"，所以 spine index 是 6。

Path component 具有如下结构：

[a, b, c, d, e, i] => ID+Class

a, b, c, d, e 表示该元素在 DOM 树中的父元素（离该元素最近的父元素 ID），i 表示元素自身的 ID 和类名。

根据这个规则，在 Hamlet 的 DOM 树中，可以看出路径的正确性：

-- -------------------- ---- -------
-------- ------------------------------------ --------------
  ----------
  -----------
  ----------
      ----- ---------- ------------------ ---------------------------------- --
      ----- ---------- ------------------ ---------------------------------- --
      ----- ----------- ----------------------------- ----------------------- --
      ----- ---------- ------------------ ---------------------------------- --
      ----- ----------- ---------------------------------- ----------------------- --
      ----- --------- ----------------- ---------------------------------- --
      ----- ----------- ---------------------------------- ----------------------- --
      ----- ----------- --------------------------------------- ----------------------- --
      ----- ----------- ----------------------------------- ----------------------- --
      ----- ----------- ----------------------------------- ----------------------- --
      ----- ----------- ----------------------------------- ----------------------- --
      ----- ----------- ----------------------------------- ----------------------- --
      ----- ----------- ----------------------------------- ----------------------- --
      ----- --------- ----------------- ---------------------------------- --
      ----- ------------ ---------------------------------- ----------------------- --
      ----- ------------ ----------------------------------- ----------------------- --
      ---
  -----------
  ------ ----------
      -------- ------------- --
      -------- ------------- --
      -------- ------------- --
      -------- ------------ --
      -------- ------------ --
      ---
  --------
----------

在示例中，CFI epubcfi(/6/14!/4/1:0) 表示如下元素：

-- -------------------- ---- -------
------
  ------
    ------
      ---- ----------
        ------- ------
        ----------
        --------- ------
        -- --------------- ----- ----- ------ --- -----------
      ------
    -------
  -------
-------

使用 cfi-algebra-manipulator 操作 CFI Algebra

cfi-algebra-manipulator 包提供了类 CfiManipulator，可以方便地操作 CFI。

在 CFI 中移动

向右移动：

const CfiManipulator = require('cfi-algebra-manipulator')
const cfi = "epubcfi(/6/14!/4/1:0)"
const manipulator = new CfiManipulator(cfi)

console.log(manipulator.moveToRight()) // /6/14!/4/1:1

向左移动：

const CfiManipulator = require('cfi-algebra-manipulator')
const cfi = "epubcfi(/6/14!/4/1:1)"
const manipulator = new CfiManipulator(cfi)

console.log(manipulator.moveToLeft()) // /6/14!/4/1:0

向上移动：

const CfiManipulator = require('cfi-algebra-manipulator')
const cfi = "epubcfi(/6/14!/4/1:0)"
const manipulator = new CfiManipulator(cfi)

console.log(manipulator.moveToParent()) // /6/14!/4

向下移动：

const CfiManipulator = require('cfi-algebra-manipulator')
const cfi = "epubcfi(/6/14!/4)"
const manipulator = new CfiManipulator(cfi)

console.log(manipulator.moveToChildWithIndex(1)) // /6/14!/4/1

获取元素信息

获取 element 的 type：

const CfiManipulator = require('cfi-algebra-manipulator')
const cfi = "epubcfi(/6/14!/4/1:0)"
const manipulator = new CfiManipulator(cfi)

console.log(manipulator.getElementType()) // "p"

获取 element 的 attributes：

const CfiManipulator = require('cfi-algebra-manipulator')
const cfi = "epubcfi(/6/14!/4/1:0)"
const manipulator = new CfiManipulator(cfi)

console.log(manipulator.getElementAttributes()) // {id: "i"}

获取 element 的 siblings：

const CfiManipulator = require('cfi-algebra-manipulator')
const cfi = "epubcfi(/6/14!/4/1:0)"
const manipulator = new CfiManipulator(cfi)

console.log(manipulator.getSiblings()) // {prev: null, next: /6/14!/4/2}

获取 element 的 previous sibling：

const CfiManipulator = require('cfi-algebra-manipulator')
const cfi = "epubcfi(/6/14!/4/2:1)"
const manipulator = new CfiManipulator(cfi)

console.log(manipulator.getPreviousSibling()) // /6/14!/4/1:0

获取 element 的 next sibling：

const CfiManipulator = require('cfi-algebra-manipulator')
const cfi = "epubcfi(/6/14!/4/2:1)"
const manipulator = new CfiManipulator(cfi)

console.log(manipulator.getNextSibling()) // /6/14!/4/3:1

获取节点之间的 CFI Range

获取两个节点之间的 CFI Range：

const CfiManipulator = require('cfi-algebra-manipulator')
const cfi = "epubcfi(/6/14!/4)"
const manipulator = new CfiManipulator(cfi)

console.log(manipulator.getRangeCfi(1, 3)) // /6/14!/4/[1,3]

总结

本教程介绍了 cfi-algebra-manipulator 的安装与使用方法，并深入介绍了如何使用 CFI Algebra 和 cfi-algebra-manipulator 程序库操作 CFI Algebra。希望能够对正在学习 ePub 开发的读者提供一些帮助，帮助各位更好地掌握 CFI Algebra 的使用技术。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055d1f81e8991b448dacb2