diff --git a/packages/vant/src/highlight/Highlight.tsx b/packages/vant/src/highlight/Highlight.tsx index 2e8542c5c..8432ff57d 100644 --- a/packages/vant/src/highlight/Highlight.tsx +++ b/packages/vant/src/highlight/Highlight.tsx @@ -1,21 +1,29 @@ import { - ref, - watchEffect, defineComponent, - type PropType, + computed, type ExtractPropTypes, + type PropType, } from 'vue'; -import { truthProp, makeStringProp, createNamespace } from '../utils'; +import { + createNamespace, + makeRequiredProp, + makeStringProp, + truthProp, +} from '../utils'; const [name, bem] = createNamespace('highlight'); export const highlightProps = { - keywords: [String, Array] as PropType, autoEscape: truthProp, - sourceString: makeStringProp(''), caseSensitive: Boolean, - highlightClassName: String, + highlightClass: String, + highlightTag: makeStringProp('span'), + keywords: makeRequiredProp>([String, Array]), + sourceString: makeStringProp(''), + tag: makeStringProp('div'), + unhighlightClass: String, + unhighlightTag: makeStringProp('span'), }; export type HighlightProps = ExtractPropTypes; @@ -26,41 +34,112 @@ export default defineComponent({ props: highlightProps, setup(props) { - const highlightedString = ref(''); - - const getHighlightClasses = () => - props.highlightClassName - ? props.highlightClassName + ` ${bem('tag')}` - : `${bem('tag')}`; - - const updateHighlight = () => { - const { keywords, sourceString, caseSensitive, autoEscape } = props; + const highlightChunks = computed(() => { + const { autoEscape, caseSensitive, keywords, sourceString } = props; const flags = caseSensitive ? 'g' : 'gi'; + const _keywords = Array.isArray(keywords) ? keywords : [keywords]; - let _keywords = keywords; + // generate chunks + let chunks = _keywords + .filter((keyword) => keyword) + .reduce>( + (chunks, keyword) => { + if (autoEscape) { + keyword = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); + } - if (typeof keywords === 'string') { - _keywords = [keywords]; + const regex = new RegExp(keyword, flags); + + let match; + while ((match = regex.exec(sourceString))) { + const start = match.index; + const end = regex.lastIndex; + + if (start >= end) { + regex.lastIndex++; + continue; + } + + chunks.push({ + start, + end, + highlight: true, + }); + } + + return chunks; + }, + [], + ); + + // merge chunks + chunks = chunks + .sort((a, b) => a.start - b.start) + .reduce((chunks, currentChunk) => { + const prevChunk = chunks[chunks.length - 1]; + + if (!prevChunk || currentChunk.start > prevChunk.end) { + const unhighlightStart = prevChunk ? prevChunk.end : 0; + const unhighlightEnd = currentChunk.start; + + if (unhighlightStart !== unhighlightEnd) { + chunks.push({ + start: unhighlightStart, + end: unhighlightEnd, + highlight: false, + }); + } + + chunks.push(currentChunk); + } else { + prevChunk.end = Math.max(prevChunk.end, currentChunk.end); + } + + return chunks; + }, []); + + const lastChunk = chunks[chunks.length - 1]; + + if (lastChunk && lastChunk.end < sourceString.length) { + chunks.push({ + start: lastChunk.end, + end: sourceString.length, + highlight: false, + }); } - const regexPattern = (_keywords as string[]).map((keyword) => { - if (autoEscape) { - return keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); + return chunks; + }); + + const renderContent = () => { + const { + sourceString, + highlightClass, + unhighlightClass, + highlightTag, + unhighlightTag, + } = props; + + return highlightChunks.value.map((chunk) => { + const { start, end, highlight } = chunk; + const text = sourceString.slice(start, end); + + if (highlight) { + return ( + + {text} + + ); } - return keyword; + + return {text}; }); - - const regex = new RegExp(`(${regexPattern.join('|')})`, flags); - const highlighted = sourceString.replace( - regex, - `$1`, - ); - - highlightedString.value = highlighted; }; - watchEffect(() => updateHighlight()); + return () => { + const { tag } = props; - return () =>
; + return {renderContent()}; + }; }, }); diff --git a/packages/vant/src/highlight/README.md b/packages/vant/src/highlight/README.md index 51278d029..0529cac4a 100644 --- a/packages/vant/src/highlight/README.md +++ b/packages/vant/src/highlight/README.md @@ -66,13 +66,13 @@ export default { ### Custom Class -Set the `highlight-class-name` of the highlighted tag to customize the style. +Set the `highlight-class` of the highlighted tag to customize the style. ```html ``` @@ -103,11 +103,15 @@ export default { | Attribute | Description | Type | Default | | --- | --- | --- | --- | -| keywords | Expected highlighted text | _string \| string[]_ | - | -| source-string | Source text | _string_ | - | | auto-escape | Whether to automatically escape | _boolean_ | `true` | | case-sensitive | Is case sensitive | _boolean_ | `false` | -| highlight-class-name | Class name of the highlight tag | _string_ | - | +| highlight-class | Class name of the highlight element | _string_ | - | +| highlight-tag | HTML Tag of highlighted element | _string_ | `span` | +| keywords | Expected highlighted text | _string \| string[]_ | - | +| source-string | Source text | _string_ | - | +| tag | HTML Tag of root element | _string_ | `div` | +| unhighlight-class | Class name of the unhighlight element | _string_ | - | +| unhighlight-tag | HTML Tag of unhighlighted element | _string_ | `span` | ### Types diff --git a/packages/vant/src/highlight/README.zh-CN.md b/packages/vant/src/highlight/README.zh-CN.md index a45aabe30..99c7d3c24 100644 --- a/packages/vant/src/highlight/README.zh-CN.md +++ b/packages/vant/src/highlight/README.zh-CN.md @@ -64,13 +64,13 @@ export default { ### 设置高亮标签类名 -通过 `highlight-class-name` 可以设置高亮标签的类名，以便自定义样式。 +通过 `highlight-class` 可以设置高亮标签的类名，以便自定义样式。 ```html ``` @@ -98,13 +98,17 @@ export default { ### Props -| 参数 | 说明 | 类型 | 默认值 | -| -------------------- | -------------- | -------------------- | ------- | -| keywords | 期望高亮的文本 | _string \| string[]_ | - | -| source-string | 源文本 | _string_ | - | -| auto-escape | 是否自动转义 | _boolean_ | `true` | -| case-sensitive | 是否区分大小写 | _boolean_ | `false` | -| highlight-class-name | 高亮标签的类名 | _string_ | - | +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| auto-escape | 是否自动转义 | _boolean_ | `true` | +| case-sensitive | 是否区分大小写 | _boolean_ | `false` | +| highlight-class | 高亮元素的类名 | _string_ | - | +| highlight-tag | 高亮元素对应的 HTML 标签名 | _string_ | `span` | +| keywords | 期望高亮的文本 | _string \| string[]_ | - | +| source-string | 源文本 | _string_ | - | +| tag | 根节点对应的 HTML 标签名 | _string_ | `div` | +| unhighlight-class | 非高亮元素的类名 | _string_ | - | +| unhighlight-tag | 非高亮元素对应的 HTML 标签名 | _string_ | `span` | ### 类型定义 diff --git a/packages/vant/src/highlight/demo/index.vue b/packages/vant/src/highlight/demo/index.vue index 8f2543ece..88c4d3145 100644 --- a/packages/vant/src/highlight/demo/index.vue +++ b/packages/vant/src/highlight/demo/index.vue @@ -9,7 +9,7 @@ const t = useTranslate({ keywords2: ['难题', '终有一天', '答案'], keywords3: '生活', multipleKeywords: '多字符匹配', - highlightClassName: '设置高亮标签类名', + highlightClass: '设置高亮标签类名', }, 'en-US': { text1: @@ -18,7 +18,7 @@ const t = useTranslate({ keywords2: ['time', 'life', 'answer'], keywords3: 'life', multipleKeywords: 'Multiple Keywords', - highlightClassName: 'Highlight Class Name', + highlightClass: 'Highlight Class Name', }, }); @@ -32,11 +32,11 @@ const t = useTranslate({ - + diff --git a/packages/vant/src/highlight/test/__snapshots__/demo-ssr.spec.ts.snap b/packages/vant/src/highlight/test/__snapshots__/demo-ssr.spec.ts.snap index 3349ad3f7..da72a4902 100644 --- a/packages/vant/src/highlight/test/__snapshots__/demo-ssr.spec.ts.snap +++ b/packages/vant/src/highlight/test/__snapshots__/demo-ssr.spec.ts.snap @@ -5,39 +5,58 @@ exports[`should render demo and match snapshot 1`] = `
- Take your time and be patient. Life itself will eventually answer all those + + + Take your time and be patient. Life itself will eventually answer all those + questions - it once raised for you. + + it once raised for you. +
- Take your + + + Take your + time - and be patient. + + and be patient. + Life - itself will eventually + + itself will eventually + answer - all those questions it once raised for you. + + all those questions it once raised for you. +
- Take your time and be patient. - + + + Take your time and be patient. + + Life - itself will eventually answer all those questions it once raised for you. + + itself will eventually answer all those questions it once raised for you. +
`; diff --git a/packages/vant/src/highlight/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/highlight/test/__snapshots__/demo.spec.ts.snap index 71f1b5125..ee137039d 100644 --- a/packages/vant/src/highlight/test/__snapshots__/demo.spec.ts.snap +++ b/packages/vant/src/highlight/test/__snapshots__/demo.spec.ts.snap @@ -3,37 +3,53 @@ exports[`should render demo and match snapshot 1`] = `
- Take your time and be patient. Life itself will eventually answer all those + + Take your time and be patient. Life itself will eventually answer all those + questions - it once raised for you. + + it once raised for you. +
- Take your + + Take your + time - and be patient. + + and be patient. + Life - itself will eventually + + itself will eventually + answer - all those questions it once raised for you. + + all those questions it once raised for you. +
- Take your time and be patient. - + + Take your time and be patient. + + Life - itself will eventually answer all those questions it once raised for you. + + itself will eventually answer all those questions it once raised for you. +
`; diff --git a/packages/vant/src/highlight/test/index.spec.ts b/packages/vant/src/highlight/test/index.spec.ts index 878e22a3b..455514069 100644 --- a/packages/vant/src/highlight/test/index.spec.ts +++ b/packages/vant/src/highlight/test/index.spec.ts @@ -58,7 +58,7 @@ test('should set custom class of the highlight tag', () => { keywords: 'time', sourceString: 'Take your time and be patient. Life itself will eventually answer all those questions it once raised for you.', - highlightClassName: 'my-custom-class', + highlightClass: 'my-custom-class', }, }); @@ -67,3 +67,31 @@ test('should set custom class of the highlight tag', () => { expect(tag.classes()).toContain('my-custom-class'); }); + +test('should be merged when the highlighted content overlaps', () => { + const wrapper = mount(Highlight, { + props: { + keywords: ['ab', 'bc'], + sourceString: 'abcd', + }, + }); + + const highlight = wrapper.find('.van-highlight'); + const tags = highlight.findAll('.van-highlight__tag'); + + expect(tags[0].text()).toEqual('abc'); +}); + +test('empty text should not be matched', () => { + const wrapper = mount(Highlight, { + props: { + keywords: ['', 'bc'], + sourceString: 'abcd', + }, + }); + + const highlight = wrapper.find('.van-highlight'); + const tags = highlight.findAll('.van-highlight__tag'); + + expect(tags[0].text()).toEqual('bc'); +});