模板信息渲染和正则表达式的运用

业务

后台配置模板消息

• 配置变量名及相关数据，用来进行查询
• 配置模板信息，嵌入变量名

前台渲染

• 通过接口获取模板信息
• 将模板消息中的变量替换成对应的数据

模板信息： '今天到场一共${aaa}人，其中男${bbb}人，女${ccc}人'
相关信息：
{
    describe:'今天到场一共${aaa}人，其中男${bbb}人，女${ccc}人',
    items:[
        {
            variable:'aaa',
            value: 100
        },
        {
            variable:'bbb',
            value: 50
        },
        {
            variable:'ccc',
            value: 50
        }
    ]
}

其中，模板会存在各种格式

模板信息： '今天到场一共${aaa}人，其中男${bbb}人，女${ccc}人 /n  test${aaa} /n ${aaa}${bbb} /n ${aaa}123${bbb}'

 

实现

利用正则表达式处理变量替换

• ^([\s\S]*?)\$\{(\w+)\}匹配任意字符串开头接上${任意字符串}
   
• ^\$\{(\w+)\}匹配${任意字符串}

利用css样式处理换行

• style={{
      wordBreak: 'break-all',
      whiteSpace: 'pre-wrap',
  }}

//templateData为接口数据
const handleTemplateData = useMemo<ReactNode[]>(() => {
    if (!templateData || !templateData.describe) return [];
    const result: ReactNode[] = [];
    let _describe: string = templateData.describe;
    const regexp: RegExp = /^([\s\S]*?)\$\{(\w+)\}|^\$\{(\w+)\}/;
    let match: RegExpMatchArray | null = regexp.exec(_describe); //匹配***${***}字符串
    while (match) {
      const str = match[0]; //获取匹配到的***${***}字符串
      const string = match[1]; //获取非${****}字符串
      const value = match[2]; //获取匹配${****}中的变量名
      const getDateFromApiData = (***) => {****}
      result.push(
        <Fragment>
          {string}{getDateFromApiData(***)}
        </Fragment>
      );
      _describe = _describe.replace(str, ''); //替换已经匹配的字符串
      match = regexp.exec(_describe); //重新匹配查询
    }
    if (_describe.length > 0) result.push(<Fragment>{_describe}</Fragment>); //arr放入剩余字符串
    return result;
  }, [templateData]);