feat: 增加自定义 classname

lib/core/html/index.ts

@@ -25,6 +25,12 @@ interface HtmlOptions {
    * @description 拼音上是否标注音调
    */
   toneType?: 'symbol' | 'num' | 'none';
+  /**
+   * @description 对于指定的汉字及字符，在 result 上额外补充的拼音
+   */
+  customClassMap?: {
+    [classname: string]: string[];
+  };
 }
 
 const DefaultHtmlOptions: HtmlOptions = {
@@ -34,6 +40,7 @@ const DefaultHtmlOptions: HtmlOptions = {
   nonChineseClass: 'py-non-chinese-item',
   wrapNonChinese: false,
   toneType: 'symbol',
+  customClassMap: {},
 };
 
 /**
@@ -52,17 +59,24 @@ export const html = (text: string, options?: HtmlOptions) => {
     toneType: completeOptions.toneType,
   });
   const result = pinyinArray.map((item) => {
+    let additionalClass = '';
+    for (const classname in completeOptions.customClassMap) {
+      const dict = completeOptions.customClassMap[classname];
+      if (dict.indexOf(item.origin) !== -1) {
+        additionalClass += ` ${classname}`;
+      }
+    }
     if (item.isZh) {
       // 汉字字符处理
       const resultClass = completeOptions.resultClass;
       const chineseClass = completeOptions.chineseClass;
       const pinyinClass = completeOptions.pinyinClass;
-      return `<span class="${resultClass}"><ruby><span class="${chineseClass}">${item.origin}</span><rp>(</rp><rt class="${pinyinClass}">${item.pinyin}</rt><rp>)</rp></ruby></span>`;
+      return `<span class="${resultClass}${additionalClass}"><ruby><span class="${chineseClass}">${item.origin}</span><rp>(</rp><rt class="${pinyinClass}">${item.pinyin}</rt><rp>)</rp></ruby></span>`;
     } else {
       // 非汉字字符处理
       if (completeOptions.wrapNonChinese) {
         const nonChineseClass = completeOptions.nonChineseClass;
-        return `<span class="${nonChineseClass}">${item.origin}</span>`;
+        return `<span class="${nonChineseClass}${additionalClass}">${item.origin}</span>`;
       } else {
         return item.origin;
       }

test/html.test.js

@@ -51,4 +51,17 @@ describe('html', () => {
       `<span class="my-result"><ruby><span class="my-chinese">汉</span><rp>(</rp><rt class="my-pinyin">hàn</rt><rp>)</rp></ruby></span><span class="my-result"><ruby><span class="my-chinese">语</span><rp>(</rp><rt class="my-pinyin">yǔ</rt><rp>)</rp></ruby></span><span class="my-non-chinese">，</span><span class="my-result"><ruby><span class="my-chinese">拼</span><rp>(</rp><rt class="my-pinyin">pīn</rt><rp>)</rp></ruby></span><span class="my-result"><ruby><span class="my-chinese">音</span><rp>(</rp><rt class="my-pinyin">yīn</rt><rp>)</rp></ruby></span>`
     );
   });
+
+  it('[html]正常拼音', () => {
+    const result = html('汉语拼音', { 
+      customClassMap: {
+        'hightlight': ['汉', '拼'],
+        'bold': ['音'],
+        'useless': ['你'],
+      } 
+    });
+    expect(result).to.be.equal(
+      '<span class="py-result-item hightlight"><ruby><span class="py-chinese-item">汉</span><rp>(</rp><rt class="py-pinyin-item">hàn</rt><rp>)</rp></ruby></span><span class="py-result-item"><ruby><span class="py-chinese-item">语</span><rp>(</rp><rt class="py-pinyin-item">yǔ</rt><rp>)</rp></ruby></span><span class="py-result-item hightlight"><ruby><span class="py-chinese-item">拼</span><rp>(</rp><rt class="py-pinyin-item">pīn</rt><rp>)</rp></ruby></span><span class="py-result-item bold"><ruby><span class="py-chinese-item">音</span><rp>(</rp><rt class="py-pinyin-item">yīn</rt><rp>)</rp></ruby></span>'
+    );
+  });
 });

types/common/type.d.ts

@@ -5,5 +5,5 @@ export interface SingleWordResult {
     isZh: boolean;
     delete?: boolean;
 }
-export declare type ToneType = 'symbol' | 'num' | 'none';
-export declare type PinyinMode = 'normal' | 'surname';
+export type ToneType = 'symbol' | 'num' | 'none';
+export type PinyinMode = 'normal' | 'surname';

types/core/convert/index.d.ts

@@ -1,4 +1,4 @@
-declare type ConvertFormat = 'numToSymbol' | 'symbolToNum' | 'toneNone';
+type ConvertFormat = 'numToSymbol' | 'symbolToNum' | 'toneNone';
 interface ConvertOptions {
     /**
      * @description 拼音之间的分隔符，默认为空格，convert方法会以该分隔符分割拼音进行转换

types/core/custom/index.d.ts

@@ -1,5 +1,5 @@
-declare type CustomHandleType = 'add' | 'replace';
-declare type CustomDictType = 'pinyin' | 'multiple' | 'polyphonic';
+type CustomHandleType = 'add' | 'replace';
+type CustomDictType = 'pinyin' | 'multiple' | 'polyphonic';
 interface CustomPinyinOptions {
     /**
      * @description: multiple 对于 customPinyin 补充词汇的处理

types/core/html/index.d.ts

@@ -23,12 +23,18 @@ interface HtmlOptions {
      * @description 拼音上是否标注音调
      */
     toneType?: 'symbol' | 'num' | 'none';
+    /**
+     * @description 对于指定的汉字及字符，在 result 上额外补充的拼音
+     */
+    customClassMap?: {
+        [classname: string]: string[];
+    };
 }
 /**
  * @description: 获取带拼音汉字的 html 字符串
  * @param {string} text 要转换的字符串
  * @param {HtmlOptions=} options html 中标签类名相关配置
  * @return {string} 带汉字的拼音字符串
  */
-export declare const html: (text: string, options?: HtmlOptions | undefined) => string;
+export declare const html: (text: string, options?: HtmlOptions) => string;
 export {};

types/core/match/index.d.ts

@@ -27,5 +27,5 @@ interface MatchOptions {
  * @param {MatchOptions=} options 配置项
  * @return {Array | null} 若匹配成功，返回 text 中匹配成功的下标数组；若匹配失败，返回 null
  */
-export declare const match: (text: string, pinyin: string, options?: MatchOptions | undefined) => any;
+export declare const match: (text: string, pinyin: string, options?: MatchOptions) => any;
 export {};

types/core/pinyin/handle.d.ts

@@ -5,21 +5,21 @@ export declare const getPinyin: (word: string, list: SingleWordResult[], mode: '
  * @param {string} pinyin
  * @return {string}
  */
-declare type GetPinyinWithoutTone = (pinyin: string) => string;
+type GetPinyinWithoutTone = (pinyin: string) => string;
 declare const getPinyinWithoutTone: GetPinyinWithoutTone;
 /**
  * @description: 获取单字符的多音拼音
  * @param {string} word
  * @return {WordResult[]}
  */
-declare type GetMultiplePinyin = (word: string, mode?: PinyinMode) => SingleWordResult[];
+type GetMultiplePinyin = (word: string, mode?: PinyinMode) => SingleWordResult[];
 declare const getMultiplePinyin: GetMultiplePinyin;
 /**
  * @description: 获取拼音的声母和韵母
  * @param {string} pinyin
  * @return {*}
  */
-declare type GetInitialAndFinal = (pinyin: string) => {
+type GetInitialAndFinal = (pinyin: string) => {
     final: string;
     initial: string;
 };
@@ -29,7 +29,7 @@ declare const getInitialAndFinal: GetInitialAndFinal;
  * @param {string} pinyin
  * @return {*}
  */
-declare type GetFinalParts = (pinyin: string) => {
+type GetFinalParts = (pinyin: string) => {
     head: string;
     body: string;
     tail: string;
@@ -40,21 +40,21 @@ declare const getFinalParts: GetFinalParts;
  * @param {string} pinyin
  * @return {string}
  */
-declare type GetNumOfTone = (pinyin: string) => string;
+type GetNumOfTone = (pinyin: string) => string;
 declare const getNumOfTone: GetNumOfTone;
 /**
  * @description: 将带音调符号拼音转换为带音调数字拼音
  * @param {string} pinyin
  * @param {string} originPinyin
  * @return {string}
  */
-declare type GetPinyinWithNum = (pinyin: string, originPinyin: string) => string;
+type GetPinyinWithNum = (pinyin: string, originPinyin: string) => string;
 declare const getPinyinWithNum: GetPinyinWithNum;
 /**
  * @description: 获取拼音的首字母
  * @param {string} pinyin
  * @return {string}
  */
-declare type GetFirstLetter = (pinyin: string) => string;
+type GetFirstLetter = (pinyin: string) => string;
 declare const getFirstLetter: GetFirstLetter;
 export { getPinyinWithoutTone, getInitialAndFinal, getMultiplePinyin, getNumOfTone, getPinyinWithNum, getFirstLetter, getFinalParts, };