sdm2

sdm2 copied to clipboard

A high-performance string discontinuous search function library

English | 📑中文

Example

Dropdown menu select

Tree select

Side menubar

Complete example click here to view

🚀 Features

• easy to use
• high performance
• less than 1kb
• Support TypeScript

Install

# via npm
npm install sdm2

#via yarn
yarn add sdm2

Introduced in Node.js, esModule, Browser

// commonjs(Node.js)
var { match, filterMap } = require('sdm2').default;

// esModule
import { match, filterMap } from 'sdm2';

Browser

<script src="https://unpkg.com/sdm2"></script>

Usage

If you use it in path search, tree control option search, checkbox item search, or other discontiguous string match of local data, it can satisfy you, please see the example below.

match string

const ret = match('src/views/home.jsx', 'shojsx');
/* ret => {
   origin: 'src/views/home.jsx',
   str: 'src/views/home.jsx',
   strArr: ['src/views/home.jsx'],
   position: [0, [10, 11], [15, 17]],
   indexes: [0, 10, 11, 15, 16, 17]
}
*/

// return null if not matched
const ret = match('src/views/home.jsx', 'ZZZZ');
// ret => null

Return Field Explanation

Match nested string

If the string being match is nested within an object, matchStr can be used to return the string being matched for.

const ret = match({ name: 'src/views/home.jsx' }, 'shojsx', {
	matchStr: obj => obj.name
});
/* ret => {
   origin: { name: 'src/views/home.jsx' },
   str: 'src/views/home.jsx',
   strArr: ['src/views/home.jsx'],
   position: [0, [10, 11], [15, 17]],
   indexes: [0, 10, 11, 15, 16, 17]
}
*/

Filter array

Filter an array with unmatched values of null.

const matchedStrings = [
   'src/views/home.jsx',
   'src/views/about.jsx',
   'src/views/ad.jsx',
];
const ret = matchedStrings. filter(strItem => match(strItem, 'srchom. X', { ignoreCase: true });
/* ret => ['src/views/home.jsx'] */

Highlight matched characters

Use the onMatched function to transform the matching string, and the matched keywords can be highlighted.

onMatched will be emit every time when a part of keywords are matched, and its parameters are the matched keywords and the original value of this match.

import { match } from 'sdm2';
const ret = match('src/views/home.jsx', 'shojsx', {
	onMatched: (matchedStr, origin) => `<span class="highlight">${matchedStr}</span>`
});
/* ret => {
   origin: 'src/views/home.jsx',
   str: '<span class="highlight">s</span>rc/views/<span class="highlight">ho</span>me.<span class="highlight">jsx</span>',
   strArr: [
     '<span class="highlight">s</span>',
     'rc/views/',
     '<span class="highlight">ho</span>',
     'me.',
     '<span class="highlight">jsx</span>'
   ],
   position: [0, [10, 11], [15, 17]],
   indexes: [0, 10, 11, 15, 16, 17]
}
*/

Filter array and highlight matched characters

If you want to filter an string array, you can use filterMap to filter and transform strings at the same time. filterMap will first filter the items that matched keywords, and then call onMap by array.map to transform the matched items.

import { filterMap } from 'sdm2';

const matchedStrings = ['src/views/home.jsx', 'src/views/about.jsx', 'src/views/ad.jsx'];
const ret = filterMap(matchedStrings, 'shojsx', {
	onMatched: (matchedStr, originStr) => `<span class="highlight">${matchedStr}</span>`,
	onMap: (matchedInfo, index) => matchedInfo.str
});
/* ret => ['<span class="highlight">s</span>rc/views/<span class="highlight">ho</span>me.<span class="highlight">jsx</ span>']
 */

jsx syntax highlighting

Maybe you don't like to use dangerouslySetInnerHTML(react) or v-html(vue) to highlight keywords, in jsx, you can also return the virtual dom in onMatched, and return the splited array in onMap, which is more in line with the habits of UI framework.

const ret = filterMap(matchedStrings, 'shojsx', {
onMatched: (matchedStr, originStr) => <span class="highlight">${matchedStr}</span>,
onMap: (matchedInfo, index) => matchedInfo.strArr
});

/* ret => [
   VNode {
     class: 'highlight',
     children: 's'
   },
   'rc/views/',
   VNode {
     class: 'highlight',
     children: 'ho'
   },
   'me.',
   VNode {
     class: 'highlight',
     children: 'jsx'
   }
]

Performance

You don't worry about the performance, each searched string will be only compared once, thus ensuring high performance. Below are performance test results for random strings.

The key string is a 50-digit random string

Welcome to submit issues

If you encounter difficulties when using sdm2, whether it is a bug or a new function, you can click here to submit

LICENSE

MIT