RichText使用

import {RichText} from '@tarojs/components';

let content = 'Hello World';

const specialChars = /<|>|&/g;
const specialCharsMap = {
  '<': '&lt;',
  '>': '&gt;',
  '&': '&amp;'
};

function escapeSpecialChars(str) {
  return str.replace(specialChars, char => specialCharsMap[char]);
}

content = escapeSpecialChars(escapeSpecialChars); // 特殊符号会报错， 需转义

['H', 'e'].forEach(item => {
    const reg = new RegExp(item, 'g');
    content = content.replace(reg, `<span style="color: #468DF7;">${item}</span>`);
});



<RichText
    style="word-wrap: break-word;word-break: break-all;" :nodes="dataForm.richtContent" // 解决富文本不能换行问题
    className={style.rich_text} nodes={content} />

.rich_text {
    /* 设置元素高度自适应 */
    height: auto;
 
    /* 设置超过四行用省略号显示，IOS一定要这富文本内写这个超出隐藏 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* 显示的行数 */
    -webkit-box-orient: vertical;

    /* 解决富文本不能换行问题 */
    word-wrap: break-word;
    word-break: break-all;
    white-space: pre-line; // 这个是换行
}