Exemplo: Texto do resultado contentText
: " Teste de aquisição sísmica ", Palavra-chave keyword
: " Aquisição "
1. Obtenha o valor comum do texto resultante contentText
e da palavra-chave keyword
, ou seja, encontre a mesma palavra e armazene-a em um array wordsArray, conforme a seguir:
//获取需要标红的文字
getRedWords(contentText, keyword) {
let keywordArray = keyword.split('');
let wordsArray = [];
for(let key of keywordArray){
if(contentText.includes(key)){
wordsArray.push(key)
}
}
return wordsArray;
},
Obtenha o resultado wordsArray:
2. Use expressões regulares para substituir o texto em cada wordsArray por contentText sucessivamente (o texto padrão é substituído por um formato vermelho), da seguinte forma: (Neste momento, a correspondência de maiúsculas e minúsculas é ignorada e a medição
real RegExp(word, 'i')
é uma correspondência. Se você quiser, se quiser corresponder várias vezes, pode usar a RegExp(word, 'g')
correspondência global. Para obter detalhes, acesse: Correspondência de expressão regular Os indivíduos podem escolher de acordo com a situação real)
//将文字标红
brightenKeyword(contentText, keyword) {
let wordsArray = this.getRedWords(contentText, keyword);
let res = contentText;//res的初始值是不带任何红色格式的
//遍历相同字数组,
for(let word of wordsArray){
const Reg = new RegExp(word, 'i');
//替换每一个相同字
res = res.replace(Reg, `<span style="color: red;">${
word}</span>`);
}
return res;//此时的res里已经将需要标红的字体带上了格式(<span style="color:red"></span>)
},
3. Chame o método brightKeyword, obtenha o valor de retorno e use o rótulo para exibir o resultado, conforme a seguir:
<span v-html="brightenKeyword(record.productName,oldSearchText)"></span>
4. O resultado final: