分组过滤逻辑优化

src/components/common/groupManageMentBox/box.jsx

@@ -23,17 +23,20 @@ class GroupBox extends React.Component {
 
     generateTreeNode(treeData) {
         const { filterLabel, editingKey } = this.state;
+        const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
+        const regLabel = filterLabel.replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1'); // 添加转义符号
         let list = treeData.sort((a, b) => (a.index - b.index)).map(t => {
-            const index = t.label.indexOf(filterLabel);
-            const beforeStr = t.label.substr(0, index);
-            const afterStr = t.label.substr(index + filterLabel.length);
-            const title = index > -1 ? (
-                <span>
-                    {beforeStr}
-                    <span style={{ color: '#f50' }}>{filterLabel}</span>
-                    {afterStr}
-                </span>
-            ) : <span>{t.label}</span>;
+
+            const title = <span>{ (regLabel) ?
+                ((t.label || '').split(new RegExp(`(${regLabel})`, 'i')).map((fragment, i) => {
+                    return (
+                        fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === regLabel.toLowerCase() ?
+                        <span key={i} style={{fontWeight: 'bold', color: 'red'}} className="highlight">{fragment}</span> :
+                        fragment
+                    )
+                }
+                )) : t.label
+            }</span>
             return <TreeNode
                 title={<div className='node-title'>
                     {t.code === editingKey ? <div className='input'>
@@ -103,7 +106,7 @@ class GroupBox extends React.Component {
         let result = [];
 
         groupData.forEach(g => {
-            if(g.label.indexOf(filterLabel) > -1 && result.indexOf(g.pcode) === -1) {
+            if(g.label.toLowerCase().indexOf(filterLabel.toLowerCase()) > -1 && result.indexOf(g.pcode) === -1) {
                 result.push(g.pcode);
             }
         });