【RN】实现markdown文本简单解析

需求

• 支持文本插入，比如 xxx {product_name} xxx ，如果提供了product_name变量的值为feedback，则可以渲染出 xxx feedback xxx。
  
• 支持链接解析，比如 [baidu](https://www.baidu.com/)，可以直接渲染成超链接的形式。
  
• 支持插入reactnode元素，比如 xxx {jump_node} xxx，且jump_node是一个reactnode元素，则可以将node节点插入到{}位置上。
  

实现

步骤：

• 先解析链接， 返回如许子的数据布局。超链接返回url-text的对象，非超链接直接返回文本字符串
  

1. export interface LinkPart {
2.   text: string;
3.   url?: string;
4.   onClick?: string;
5. }
7. export type ParsedTextPart = string | LinkPart;
9. [
10.   {
11.     text: 'baidu',
12.     url: 'https://www.baidu.com/',
13.   },
14.   'other content',
15.   'other content',
16. ];

复制代码

• 遍历解析后的超链接数组，如果是对象，则渲染超链接；如果是字符串，继续解析
  
• 解析字符串，判定必要解析的{}里面的文本是否是纯文本，如果是纯文本，则直接Text渲染；如果是react元素，则渲染该元素
  

TextTemplate.tsx:

1. import React, { ReactNode } from 'react';
2. import { routeCenter } from '@shopeepay-rn/route-center';
3. import { usePageContainerContext } from '@shopeepay-rn/page-container';
4. import { StyleProp, Text, TextStyle, View, ViewStyle } from 'react-native';
5. import { parseLinkText } from '../../utils';
6. import styles from './styles';
8. interface Props {
9.   template: string;
10.   // eg: {product_name:'spp', click_node:<Text></Text>}
11.   replaceValueMap: Record<string, string | number | ReactNode>;
12.   textStyle?: StyleProp<TextStyle>;
13.   containerStyle?: StyleProp<ViewStyle>;
14. }
16. /**
17. * 支持解析字符串、解析react元素、解析超链接
18. * @param template 需要解析的字符串
19. * @param replaceValueMap 需要替换的key-value，value支持字符串和react元素
20. * @param textStyle 字体样式
21. * @param containerStyle 容器样式
22. * @returns react元素
23. */
24. export const TextTemplate = ({
25.   template,
26.   replaceValueMap,
27.   textStyle,
28.   containerStyle,
29. }: Props) => {
30.   const { rootTag } = usePageContainerContext();
32.   const parseText = (text: string, index: number) => {
33.     const result: React.ReactNode[] = [];
34.     let lastIndex = 0;
36.     text.replace(/{(\w+)}/g, (match: string, key: string, offset: number) => {
37.       const replaceValue = replaceValueMap[key];
38.       if (offset > lastIndex) {
39.         // 未被匹配到的
40.         result.push(
41.           <Text key={index} style={textStyle}>
42.             {text.substring(lastIndex, offset)}
43.           </Text>
44.         );
45.       }
47.       if (React.isValidElement(replaceValue)) {
48.         // 需要替换的是reactnode元素
49.         result.push(React.cloneElement(replaceValue, { key: index }));
50.       } else if (typeof replaceValue === 'string') {
51.         // 需要替换的是字符串
52.         result.push(
53.           <Text key={index} style={textStyle}>
54.             {replaceValue}
55.           </Text>
56.         );
57.       }
59.       lastIndex = offset + match.length;
60.       return '';
61.     });
63.     if (lastIndex < text.length) {
64.       result.push(
65.         <Text key={index} style={textStyle}>
66.           {text.substring(lastIndex)}
67.         </Text>
68.       );
69.     }
71.     return result;
72.   };
74.   const parseTemplate = (text: string) => {
75.     // 解析链接
76.     const linkTexts = parseLinkText(text);
78.     return linkTexts?.map((part, index) => {
79.       return typeof part === 'string' ? (
80.         // 对于字符串，需要解析 纯字符串 还是 reactnode元素
81.         parseText(part, index)
82.       ) : (
83.         <Text
84.           key={index}
85.           style={styles.link}
86.           onPress={() =>
87.             routeCenter.navigateWeb(
88.               part.url || '',
89.               {
90.                 navbar: {
91.                   title: part.text || '',
92.                 },
93.               },
94.               rootTag
95.             )
96.           }
97.         >
98.           {part.text}
99.         </Text>
100.       );
101.     });
102.   };
104.   return (
105.     <View style={[styles.textView, containerStyle]}>
106.       <Text>{parseTemplate(template)}</Text>
107.     </View>
108.   );
109. };

复制代码

parseLinkText.ts:

1. export interface LinkPart {
2.   text: string;
3.   url?: string;
4.   onClick?: string;
5. }
7. export type ParsedTextPart = string | LinkPart;
9. const parseLinkText = (text: string): ParsedTextPart[] => {
10.   const regex = /\[([^\]]+)\]\(([^)]+)\)/g;
11.   const parts: ParsedTextPart[] = [];
12.   let lastIndex = 0;
14.   text.replace(
15.     regex,
16.     (match: string, p1: string, p2: string, offset: number) => {
17.       if (offset > lastIndex) {
18.         parts.push(text.substring(lastIndex, offset));
19.       }
21.       parts.push({ text: p1, url: p2 });
22.       lastIndex = offset + match.length;
23.       return '';
24.     }
25.   );
27.   if (lastIndex < text.length) {
28.     parts.push(text.substring(lastIndex));
29.   }
31.   return parts;
32. };
34. // FIXME: 添加 unit test
35. export { parseLinkText };

复制代码

使用

1. <TextTemplate
2.   template={"you can test the TextTemplate component, parse {string_text}, parse [baidu](https://www.baidu.com/) link, parse {click_node} to show popup"}
3.   replaceValueMap={{string_text:"test string",click_node:<Text>other react node</Text>}}
4.   textStyle={styles.titleText}
5. />

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。