项目中遇到从Network看接口返回值看不到response结果。页面处于卡死状态。一直以为是接口请求超时问题，因为觉得即使页面死循环也不应该影响浏览器查看返回值。但是死循环确实导致无法查看Network中接口响应值！！
将其通过组件形式引入项目中，至少需要两个参数，searchWords(待高亮词组)和texts(整个待检测文本)。
<Hightlight
searchWords=['你好', '世界']
text="这是一个所有人都需要说你好的世界"
/>
首先，需要找出待高亮词在整段文本中的位置，必然需要进行遍历。而对于文本遍历扩展性最强的莫过于通过正则表达式遍历，此时需要用到exec方法。
const chunks = []; //用于存放遍历出的位置
searchWords.forEach((word) => {
const reg = new RegExp(word, "g");
let match;
while(match=reg.exec(text)) {
const start = match.index; // 开始匹配的位置
const end = reg.lastIndex; // 下次开始匹配位置 if (start < end) {
chunks.push({start, end, highlight: true})
}
}
})
问题
在处理searchWords值的过程中，出现了[undefined]的情况。而undefined对应的正则表达式本质是/(?:)/g。它会匹配空字符串，出现死循环！！需要处理该种情况
- 通过过滤匹配结果出现死循环的问题
具体代码如下
const chunks = []; //用于存放遍历出的位置
searchWords.forEach((word) => {
const reg = new RegExp(word, "g");
let match;
while(match=reg.exec(text)) {
const start = match.index; // 开始匹配的位置
const end = reg.lastIndex; // 下次开始匹配位置
if (start < end) {
chunks.push({start, end, highlight: true})
}
if (start === end)break;
}
})
- 从正则表达式出发；提前处理searchWords
处理规则如下：
searchWords.filter(i => i!==undefined || i!=="");
