前言
最近遇到个模糊匹配的小需求，需要对树形结构的内容进行模糊匹配，对树中的节点，只要是出现了相应文本，就把节点以上的整个树都展示出来
之前我写过一些针对id的匹配，和这个还不太一样，因为id的匹配是唯一的，只要进行一次递归（遍历），找到就能返回相应节点，也做过将树形数据可视化的功能，但是要根据规则记录树形结构，就稍微麻烦点。
分类树
分类树.png
基本上就是这样一个分类树，数据结构如下：
const data = [{
id: 1,
txt: '测试1',
children: [{
id: 11,
txt: '测试11',
children: [{
id: 111,
txt: '测试111',
children: [{
id: 1111,
txt: '这里就不是',
children: []
}]
}]
}, {
id: 12,
txt: '测试12',
children: [{
id: 121,
txt: '测试121',
children: [{
id: 1211,
txt: '测试1211',
children: []
}]
}]
}]
}, {
id: 2,
txt: '测试2',
children: [{
id: 21,
txt: '测试21'
}]
}]
要求
当我输入“测试”时，把所有包含“测试”节点都显示出来，也就是除了最后的“这里就不是”节点，其他的都要出来
当我输入“这里都不是”时，虽然他的父级节点都没有包含这个字符，但是作为他的父节点，所以也都要显示出来（作为树形结构）
当我输入“测试2”时，就只会显示根数组的第二个元素，因为只有这个分支中包含“测试2”的完整文本
总结一下，就是根据输入的文本，要显示出最深的包含此文本的节点的整个分支。
设计和代码
首先，根据需求，要对树进行遍历，给每一个节点一个字段，用来判断是否可以输出
// 给每个分支上有所匹配的设置isNeed
function setFlag (data, keyword) {
return data.map(item => {
item.isNeed = isNeedBranch(item, keyword)
if(item.children && item.children.length) {
setFlag(item.children, keyword)
}
return item
})
}
这个判断的函数isNeedBranch也是一个递归，需要遍历整个树的每一个节点，只有当子节点中没有匹配到，并且自身也没有匹配到时，才会返回false
// 判断这条分支上有没有匹配到的
function isNeedBranch (item, keyword) {
let flag1 = false,
flag2 = false
if(item.txt.indexOf(keyword) > -1) {
flag1 = true
} else if(item.children && item.children.length) {
item.children.forEach(child => {
if(isNeedBranch(child, keyword)) {
flag2 = true
}
})
}
return flag1 || flag2
}
最后，对遍历过的树进行筛选，通过filter进行递归，把filter返回的值赋给chilren，完成筛选。
// 过滤掉分支上isNeed为false的元素
function treeFilter (data) {
return data.filter((item, index) => {
if(item && item.children && item.children.length) {
item.children = treeFilter(item.children)
}
return item.isNeed
})
}
拿到数据后，还要进行渲染，渲染出树形DOM，当然，有jsx或者模板的话，就不用这么麻烦
但是，要把拿到的数据进行一次deepcopy，或者每次点击都重新拿取，因为forEach或map方法都改变原数组
function getShowHTML(val, data) {
if(!val) return ''
let dataCopy = JSON.parse(JSON.stringify(data)) // 一个简单的deepCopy
let filterTree = treeFilter(setFlag(dataCopy, val))
return (filterTree && filterTree.length) ? getTreeHtml(filterTree) : ''
}
function getTreeHtml(tree) {
let rootHTML = document.createElement('ul')
rootHTML.style.id = 'root'
let search = (nodeHTML, nodeJSON) => {
nodeJSON.forEach(item => {
// console.log('nodeHTML', nodeHTML)
if(item.children && item.children.length) {
let thisNode = document.createElement('li')
let thisNodeUl = document.createElement('ul')
thisNode.append(item.txt)
thisNode.append(thisNodeUl)
// console.log('thisNode.children', thisNode)
search(thisNode.children[0], item.children)
nodeHTML && nodeHTML.append(thisNode)
} else {
let li = document.createElement('li')
li.append(item.txt)
li.style.id = item.id
nodeHTML && nodeHTML.append(li)
}
})
}
search(rootHTML, tree)
return rootHTML
}
image.png
