富文本某一颜色字数超长时·····显示,例如:哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或,或或哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或,这样显示会过长,显示成哈哈哈哈哈哈哈哈哈哈或或······或或或或或或或或或或或或或或,或或哈哈哈哈哈哈哈哈哈哈或或······或或或或或或或或或或或或或或或或。
段落中可能出现多段带有颜色的字体,想每段带有颜色字体都能省略显示。
function showhtml(htmlString) {
const strArr = htmlString.split("<font color=");
const arrMap = strArr.map((item, index) => {
const isHaveHtml = item.slice(0,item.indexOf('</font>')).match(/<\/?span.*?>.*?<\/span>/g);
if (isHaveHtml||item.indexOf('</font>')<=110) {
return item;
}else{
return `${item.slice(0,60)} · · · · · · ${item.slice(item.indexOf('</font>')-50,item.length)}`;
}
});
const html = { __html: arrMap.join('<font color=') };
return <span dangerouslySetInnerHTML={html} style={{ lineHeight: 2 }}></span>;
}
注:本段代码dangerouslySetInnerHTML是在react中使用的,因富文本中可能出现span标签带颜色,在此span标签不做处理,只处理了font标签。