refactor(Highlight): refactor implementation & increase functionality (#12442)

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<string | string[]>,
   autoEscape: truthProp,
-  sourceString: makeStringProp(''),
   caseSensitive: Boolean,
-  highlightClassName: String,
+  highlightClass: String,
+  highlightTag: makeStringProp<keyof HTMLElementTagNameMap>('span'),
+  keywords: makeRequiredProp<PropType<string | string[]>>([String, Array]),
+  sourceString: makeStringProp(''),
+  tag: makeStringProp<keyof HTMLElementTagNameMap>('div'),
+  unhighlightClass: String,
+  unhighlightTag: makeStringProp<keyof HTMLElementTagNameMap>('span'),
 };
 
 export type HighlightProps = ExtractPropTypes<typeof highlightProps>;
@@ -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<Array<{ start: number; end: number; highlight: boolean }>>(
+          (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<typeof chunks>((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 (
+            <highlightTag class={[bem('tag'), highlightClass]}>
+              {text}
+            </highlightTag>
+          );
         }
-        return keyword;
+
+        return <unhighlightTag class={unhighlightClass}>{text}</unhighlightTag>;
       });
-
-      const regex = new RegExp(`(${regexPattern.join('|')})`, flags);
-      const highlighted = sourceString.replace(
-        regex,
-        `<span class="${getHighlightClasses()}">$1</span>`,
-      );
-
-      highlightedString.value = highlighted;
     };
 
-    watchEffect(() => updateHighlight());
+    return () => {
+      const { tag } = props;
 
-    return () => <div class={bem()} innerHTML={highlightedString.value}></div>;
+      return <tag class={bem()}>{renderContent()}</tag>;
+    };
   },
 });

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
 <van-highlight
   :keywords="keywords"
   :source-string="text"
-  highlight-class-name="custom-class"
+  highlight-class="custom-class"
 />
 ```
 
@@ -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
 

packages/vant/src/highlight/README.zh-CN.md

@@ -64,13 +64,13 @@ export default {
 
 ### 设置高亮标签类名
 
-通过 `highlight-class-name` 可以设置高亮标签的类名，以便自定义样式。
+通过 `highlight-class` 可以设置高亮标签的类名，以便自定义样式。
 
 ```html
 <van-highlight
   :keywords="keywords"
   :source-string="text"
-  highlight-class-name="custom-class"
+  highlight-class="custom-class"
 />
 ```
 
@@ -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` |
 
 ### 类型定义
 

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',
   },
 });
 </script>
@@ -32,11 +32,11 @@ const t = useTranslate({
     <van-highlight :keywords="t('keywords2')" :source-string="t('text1')" />
   </demo-block>
 
-  <demo-block :title="t('highlightClassName')">
+  <demo-block :title="t('highlightClass')">
     <van-highlight
       :keywords="t('keywords3')"
       :source-string="t('text1')"
-      highlight-class-name="custom-class"
+      highlight-class="custom-class"
     />
   </demo-block>
 </template>

packages/vant/src/highlight/test/__snapshots__/demo-ssr.spec.ts.snap

@@ -5,39 +5,58 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <!--[-->
   <div class="van-highlight">
-    Take your time and be patient. Life itself will eventually answer all those
+    <!--[-->
+    <span class>
+      Take your time and be patient. Life itself will eventually answer all those
+    </span>
     <span class="van-highlight__tag">
       questions
     </span>
-    it once raised for you.
+    <span class>
+      it once raised for you.
+    </span>
   </div>
 </div>
 <div>
   <!--[-->
   <div class="van-highlight">
-    Take your
+    <!--[-->
+    <span class>
+      Take your
+    </span>
     <span class="van-highlight__tag">
       time
     </span>
-    and be patient.
+    <span class>
+      and be patient.
+    </span>
     <span class="van-highlight__tag">
       Life
     </span>
-    itself will eventually
+    <span class>
+      itself will eventually
+    </span>
     <span class="van-highlight__tag">
       answer
     </span>
-    all those questions it once raised for you.
+    <span class>
+      all those questions it once raised for you.
+    </span>
   </div>
 </div>
 <div>
   <!--[-->
   <div class="van-highlight">
-    Take your time and be patient.
-    <span class="custom-class van-highlight__tag">
+    <!--[-->
+    <span class>
+      Take your time and be patient.
+    </span>
+    <span class="van-highlight__tag custom-class">
       Life
     </span>
-    itself will eventually answer all those questions it once raised for you.
+    <span class>
+      itself will eventually answer all those questions it once raised for you.
+    </span>
   </div>
 </div>
 `;

packages/vant/src/highlight/test/__snapshots__/demo.spec.ts.snap

@@ -3,37 +3,53 @@
 exports[`should render demo and match snapshot 1`] = `
 <div>
   <div class="van-highlight">
-    Take your time and be patient. Life itself will eventually answer all those
+    <span>
+      Take your time and be patient. Life itself will eventually answer all those
+    </span>
     <span class="van-highlight__tag">
       questions
     </span>
-    it once raised for you.
+    <span>
+      it once raised for you.
+    </span>
   </div>
 </div>
 <div>
   <div class="van-highlight">
-    Take your
+    <span>
+      Take your
+    </span>
     <span class="van-highlight__tag">
       time
     </span>
-    and be patient.
+    <span>
+      and be patient.
+    </span>
     <span class="van-highlight__tag">
       Life
     </span>
-    itself will eventually
+    <span>
+      itself will eventually
+    </span>
     <span class="van-highlight__tag">
       answer
     </span>
-    all those questions it once raised for you.
+    <span>
+      all those questions it once raised for you.
+    </span>
   </div>
 </div>
 <div>
   <div class="van-highlight">
-    Take your time and be patient.
-    <span class="custom-class van-highlight__tag">
+    <span>
+      Take your time and be patient.
+    </span>
+    <span class="van-highlight__tag custom-class">
       Life
     </span>
-    itself will eventually answer all those questions it once raised for you.
+    <span>
+      itself will eventually answer all those questions it once raised for you.
+    </span>
   </div>
 </div>
 `;

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');
+});