部分文字高亮方案

问题描述

在项目中经常会有展示高亮字体的需求，提供一种比较便捷的实现方案：

解决方案

首先，和后端字段约定符号： {xxx}，比如大括号内容高亮；
重要代码如下：

const RegEx = /(\{.*?\})/g;
listItem.recommendation?.split(RegEx)?.map((tagItem: string, tagIndex: number) => {
  return !RegEx.test(tagItem) ? (
    <span key={tagIndex}>{tagItem}</span>
  ) : (
    <span key={tagIndex} className={styles.highlight}>
      {tagItem.slice(1, tagItem.length - 1)}
    </span>
  );
})