index.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. /**
  2. * @fileoverview search 插件
  3. */
  4. function Search (vm) {
  5. /**
  6. * @description 关键词搜索
  7. * @param {regexp|string} key 要搜索的关键词
  8. * @param {boolean} anchor 是否将搜索结果设置为锚点
  9. * @param {string} style 搜索结果的样式
  10. */
  11. vm.search = function (key, anchor, style = 'background-color:yellow') {
  12. const res = []
  13. const stack = [];
  14. // 遍历搜索
  15. (function traversal (nodes) {
  16. for (let i = 0; i < nodes.length; i++) {
  17. let node = nodes[i]
  18. if (node.type === 'text' && key) {
  19. const text = node.text
  20. const arr = text.split(key)
  21. if (arr.length > 1) {
  22. node = {
  23. name: 'span',
  24. attrs: {},
  25. type: 'node',
  26. c: anchor ? 1 : undefined,
  27. s: 1,
  28. children: []
  29. }
  30. vm.$set(nodes, i, node)
  31. for (let j = 0; j < arr.length; j++) {
  32. if (arr[j]) {
  33. node.children.push({
  34. type: 'text',
  35. text: arr[j]
  36. })
  37. }
  38. if (j !== arr.length - 1) {
  39. // 关键词转为一个 span
  40. node.children.push({
  41. name: 'span',
  42. attrs: {
  43. id: anchor ? 'search' + (res.length + 1) : undefined, // 用于锚点的 id
  44. style: style
  45. },
  46. children: [{
  47. type: 'text',
  48. text: key instanceof RegExp ? key.exec(text)[0] : key
  49. }]
  50. })
  51. res.push(node.children[node.children.length - 1].attrs)
  52. }
  53. }
  54. if (key instanceof RegExp) {
  55. key.exec(text)
  56. }
  57. if (anchor) {
  58. for (let l = stack.length; l--;) {
  59. if (stack[l].c) {
  60. break
  61. } else {
  62. vm.$set(stack[l], 'c', 1)
  63. }
  64. }
  65. }
  66. }
  67. } else if (node.s) {
  68. let text = ''
  69. // 复原上一次的结果
  70. for (let k = 0; k < node.children.length; k++) {
  71. const child = node.children[k]
  72. if (child.text) {
  73. text += child.text
  74. } else {
  75. text += child.children[0].text
  76. }
  77. }
  78. vm.$set(nodes, i, {
  79. type: 'text',
  80. text
  81. })
  82. if (key && (key instanceof RegExp ? key.test(text) : text.includes(key))) {
  83. i--
  84. }
  85. } else if (node.children) {
  86. stack.push(node)
  87. traversal(node.children)
  88. stack.pop()
  89. }
  90. }
  91. })(vm.nodes)
  92. return new Promise(function (resolve) {
  93. setTimeout(() => {
  94. resolve({
  95. num: res.length, // 结果数量
  96. /**
  97. * @description 高亮某一个结果
  98. * @param {number} i 第几个
  99. * @param {string} hlstyle 高亮的样式
  100. */
  101. highlight (i, hlstyle = 'background-color:#FF9632') {
  102. if (i < 1 || i > res.length) return
  103. if (this.last) {
  104. res[this.last - 1].style = style
  105. }
  106. this.last = i
  107. res[i - 1].style = hlstyle
  108. },
  109. /**
  110. * @description 跳转到搜索结果
  111. * @param {number} i 第几个
  112. * @param {number} offset 偏移量
  113. */
  114. jump: anchor
  115. ? (i, offset) => {
  116. if (i > 0 && i <= res.length) {
  117. vm.navigateTo('search' + i, offset)
  118. }
  119. }
  120. : undefined
  121. })
  122. }, 200)
  123. })
  124. }
  125. }
  126. module.exports = Search