Initial commit

This commit is contained in:
admin
2025-12-08 14:39:07 +08:00
commit 9d4f78656b
782 changed files with 66418 additions and 0 deletions

View File

@@ -0,0 +1,46 @@
# search
功能:关键词搜索
大小:*≈1.5KB*
支持平台:
| 微信小程序 | QQ 小程序 | 百度小程序 | 支付宝小程序 | 头条小程序 | uni-app |
|:---:|:---:|:---:|:---:|:---:|:---:|
| √ | √ | √ | √ | √ | √(nvue 不支持) |
说明:
引入后会在组件实例上挂载一个 *search* 方法,用于关键词搜索
输入值
| 参数名 | 类型 | 默认值 | 说明 |
|:---:|:---:|:---:|---|
| key | String 或 RegExp | - | 要搜索的关键词,支持字符串和正则 |
| anchor | Boolean | false | 是否将搜索结果设置为锚点 |
| style | String | background-color:yellow | 标记搜索结果的样式 |
返回值:*Promise*
| 属性 | 类型 | 说明 |
|:---:|:---:|---|
| num | Number | 搜索结果数量 |
| highlight | Function(i, style='background-color:#FF9632') | 高亮第 i1 ~ num个结果将其样式设置为 style |
| jump | Function(i, offset) | 跳转到第 i1 ~ num个结果偏移量为 offsetanchor 为 true 才可用 |
示例:
```javascript
function search (key) {
// ctx 为组件实例
ctx.search(key, true).then(res => {
res.highlight(1)
res.jump(1, -50) // 高亮第 1 个结果并跳转到该位置,偏移量 -50
})
}
```
附加说明:
1. 不传入 *key*(或为空)时即可取消搜索,取消所有的高亮,还原到原来的效果
2. 进行新的搜索时旧的搜索结果将被还原,旧的结果中的 *highlight* 等方法不再可用
3. 调用 *highlight* 方法高亮一个结果时,之前被高亮的结果会被还原,即始终只有一个结果被高亮
4. *key* 传入字符串时大小写敏感,如果要忽略大小写可以用正则的 *i*(字符串搜索效率高于正则)
5. 设置 *anchor**true* 会一定程度上降低效率,非必要不要开启
6. 暂不支持跨标签搜索,即只有一个文本节点内包含整个关键词才能被搜索到

View File

@@ -0,0 +1,137 @@
/**
* @fileoverview search 插件
*/
function Search (vm) {
/**
* @description 关键词搜索
* @param {regexp|string} key 要搜索的关键词
* @param {boolean} anchor 是否将搜索结果设置为锚点
* @param {string} style 搜索结果的样式
*/
vm.search = function (key, anchor, style = 'background-color:yellow') {
const obj = {}
const stack = []
const res = [];
// 遍历搜索
(function traversal (nodes, path) {
for (let i = 0; i < nodes.length; i++) {
const node = nodes[i]
if (node.type === 'text' && key) {
const arr = node.text.split(key)
const children = []
if (arr.length > 1) {
// 找到关键词
for (let j = 0; j < arr.length; j++) {
if (arr[j]) {
children.push({
type: 'text',
text: arr[j]
})
}
if (j !== arr.length - 1) {
// 关键词转为一个 span
res.push(`${path}[${i}].children[${children.length}].attrs.style`)
children.push({
name: 'span',
attrs: {
id: anchor ? 'search' + res.length : undefined, // 用于锚点的 id
style
},
children: [{
type: 'text',
text: key instanceof RegExp ? key.exec(node.text)[0] : key
}]
})
}
}
if (key instanceof RegExp) {
key.exec(node.text)
}
if (anchor) {
for (let l = stack.length; l--;) {
// 给父组件做标记,将该标签暴露出来
if (stack[l].c) {
break
} else {
obj[stack[l].path] = 1
}
}
}
obj[`${path}[${i}]`] = {
name: 'span',
c: anchor ? 1 : undefined,
s: 1,
children
}
}
} else if (node.s) {
let text = ''
// 复原上一次的结果
for (let k = 0; k < node.children.length; k++) {
const child = node.children[k]
if (child.text) {
text += child.text
} else {
text += child.children[0].text
}
}
nodes[i] = {
type: 'text',
text
}
if (key && (key instanceof RegExp ? key.test(text) : text.includes(key))) {
i--
} else {
obj[`${path}[${i}]`] = nodes[i]
}
} else if (node.children) {
stack.push({
path: `${path}[${i}].c`,
c: node.c || node.name === 'table'
})
traversal(node.children, `${path}[${i}].children`)
stack.pop()
}
}
})(vm.data.nodes, 'nodes')
return new Promise(function (resolve) {
vm.setData(obj, () => {
resolve({
num: res.length, // 结果数量
/**
* @description 高亮某一个结果
* @param {number} i 第几个
* @param {string} hlstyle 高亮的样式
*/
highlight (i, hlstyle = 'background-color:#FF9632') {
if (i < 1 || i > res.length) return
const obj = {}
if (this.last) {
obj[res[this.last - 1]] = style
}
this.last = i
obj[res[i - 1]] = hlstyle
vm.setData(obj)
},
/**
* @description 跳转到搜索结果
* @param {number} i 第几个
* @param {number} offset 偏移量
*/
jump: anchor
? (i, offset) => {
if (i > 0 && i <= res.length) {
vm.navigateTo('search' + i, offset)
}
}
: undefined
})
})
})
}
}
module.exports = Search

View File

@@ -0,0 +1,132 @@
/**
* @fileoverview search 插件
*/
function Search (vm) {
/**
* @description 关键词搜索
* @param {regexp|string} key 要搜索的关键词
* @param {boolean} anchor 是否将搜索结果设置为锚点
* @param {string} style 搜索结果的样式
*/
vm.search = function (key, anchor, style = 'background-color:yellow') {
const res = []
const stack = [];
// 遍历搜索
(function traversal (nodes) {
for (let i = 0; i < nodes.length; i++) {
let node = nodes[i]
if (node.type === 'text' && key) {
const text = node.text
const arr = text.split(key)
if (arr.length > 1) {
node = {
name: 'span',
attrs: {},
type: 'node',
c: 1,
s: 1,
children: []
}
vm.$set(nodes, i, node)
for (let j = 0; j < arr.length; j++) {
if (arr[j]) {
node.children.push({
type: 'text',
text: arr[j]
})
}
if (j !== arr.length - 1) {
// 关键词转为一个 span
node.children.push({
name: 'span',
attrs: {
id: anchor ? 'search' + (res.length + 1) : undefined, // 用于锚点的 id
style: style
},
// #ifdef VUE3
c: 1,
// #endif
children: [{
type: 'text',
text: key instanceof RegExp ? key.exec(text)[0] : key
}]
})
res.push(node.children[node.children.length - 1].attrs)
}
}
if (key instanceof RegExp) {
key.exec(text)
}
if (anchor) {
for (let l = stack.length; l--;) {
if (stack[l].c) {
break
} else {
vm.$set(stack[l], 'c', 1)
}
}
}
}
} else if (node.s) {
let text = ''
// 复原上一次的结果
for (let k = 0; k < node.children.length; k++) {
const child = node.children[k]
if (child.text) {
text += child.text
} else {
text += child.children[0].text
}
}
vm.$set(nodes, i, {
type: 'text',
text
})
if (key && (key instanceof RegExp ? key.test(text) : text.includes(key))) {
i--
}
} else if (node.children) {
stack.push(node)
traversal(node.children)
stack.pop()
}
}
})(vm.nodes)
return new Promise(function (resolve) {
setTimeout(() => {
resolve({
num: res.length, // 结果数量
/**
* @description 高亮某一个结果
* @param {number} i 第几个
* @param {string} hlstyle 高亮的样式
*/
highlight (i, hlstyle = 'background-color:#FF9632') {
if (i < 1 || i > res.length) return
if (this.last) {
res[this.last - 1].style = style
}
this.last = i
res[i - 1].style = hlstyle
},
/**
* @description 跳转到搜索结果
* @param {number} i 第几个
* @param {number} offset 偏移量
*/
jump: anchor
? (i, offset) => {
if (i > 0 && i <= res.length) {
vm.navigateTo('search' + i, offset)
}
}
: undefined
})
}, 200)
})
}
}
module.exports = Search