问题描述
在项目中经常会有展示高亮字体的需求,提供一种比较便捷的实现方案:
解决方案
首先,和后端字段约定符号: {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>
);
})