背景:转发微博//@游向王者目标:网友翻出<font color='red'>杨</font><font color='red'>丽</font><font color='red'>萍</font>35岁时的视频,视频中的<font color='red'>杨</font><font color='red'>丽</font><font color='red'>萍</font>好港好美,就算是将妆容放到现在也是复古时髦look#<font color='red'>杨</font><font color='red'>丽</font><font color='red'>萍</font><font color='red'>宣布</font><font color='red'>云南</font><font color='red'>映象</font><font color='red'>演出团队</font><font color='red'>解散</font>#游向王者目标的微博视频 如上面所示字符串,由于展示计算问题,现在需要截取其中指定个数的文字,并且截取后是要带字符串的,怎么处理? 分析: 要实现上述要求,想到两种方式:方式一:对字符串进行循环匹配,当遇到<font> 标签时,直接提取其中内容加上,如果加上后字数不足所要的,继续向后,如果超过所要的,向前再减去相应字数。方式二:将字符串转化为纯文本,截取对应字数的内容,再将<font> 标签中的内容提取出来,与字符串进行匹配,若匹配到,则将内容替换成带标签的内容。 由于方式一性能过于差,最后取用方式二。 实现:
const content = "转发微博//@游向王者目标:网友翻出<font color='red'>杨</font><font color='red'>丽</font><font color='red'>萍</font>35岁时的视频,视频中的<font color='red'>杨</font><font color='red'>丽</font><font color='red'>萍</font>好港好美,就算是将妆容放到现在也是复古时髦look#<font color='red'>杨</font><font color='red'>丽</font><font color='red'>萍</font><font color='red'>宣布</font><font color='red'>云南</font><font color='red'>映象</font><font color='red'>演出团队</font><font color='red'>解散</font>#游向王者目标的微博视频"
const wordsCount = 10
const ele = document.createElement('div');
ele.innerHTML = content;
const plainText = ele.innerText;
let hightKeywords = [...new Set(Array.from(content.matchAll(/<font.+?>(.+?)<\/font>/g)).map(item => item[1]).filter(item => item))];
let limitContent = `${plainText.slice(0, wordsCount)}...`;
hightKeywords = hightKeywords.map(item => item.replace(/[.*+?^${}()| [\]\\]/g, '\\$&')).join('|');
limitContent = limitContent.replace(new RegExp(`(${hightKeywords})`, 'g'), (match) => `<font color='red'>${match}</font>`);
return limitContent;
|