Fuse.js包含匹配高亮显示-它是如何工作的

Question

我正在下一个js/Typescript web应用程序中使用Fuse.js库。我不确定includeMatches选项是如何突出显示的。如果我使用该选项，我会在结果对象中得到一个matches对象，该对象包含一大堆from和to索引，而且它似乎比实际匹配的要多得多。

如何使用此数组进行高亮显示？任何人

Answer 1

一个好的起点是https://gist.github.com/evenfrost/1ba123656ded32fb7a0cd4651efd4db0

const highlight = (fuseSearchResult: any, highlightClassName: string = 'highlight') => {
const set = (obj: object, path: string, value: any) => {
const pathValue = path.split('.');
let i;
for (i = 0; i < pathValue.length - 1; i++) {
obj = obj[pathValue[i]];
}
obj[pathValue[i]] = value;
};
const generateHighlightedText = (inputText: string, regions: number[] = []) => {
let content = '';
let nextUnhighlightedRegionStartingIndex = 0;
regions.forEach(region => {
const lastRegionNextIndex = region[1] + 1;
content += [
inputText.substring(nextUnhighlightedRegionStartingIndex, region[0]),
`<span class="${highlightClassName}">`,
inputText.substring(region[0], lastRegionNextIndex),
'</span>',
].join('');
nextUnhighlightedRegionStartingIndex = lastRegionNextIndex;
});
content += inputText.substring(nextUnhighlightedRegionStartingIndex);
return content;
};
return fuseSearchResult
.filter(({ matches }: any) => matches && matches.length)
.map(({ item, matches }: any) => {
const highlightedItem = { ...item };
matches.forEach((match: any) => {
set(highlightedItem, match.key, generateHighlightedText(match.value, match.indices));
});
return highlightedItem;
});
};
// usage:
const res = highlight(fuse.search(text)); // array of items with highlighted fields