Como o front-end (js, vue) percebe o efeito de marca vermelha do resultado da pesquisa de acordo com a palavra-chave (implementação de expressão regular)

Exemplo: Texto do resultado contentText: " Teste de aquisição sísmica ", Palavra-chave keyword: " Aquisição "

1. Obtenha o valor comum do texto resultante contentTexte 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: insira a descrição da imagem aqui
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:
insira a descrição da imagem aqui

Acho que você gosta

Origin blog.csdn.net/qq_43952288/article/details/129789668
Recomendado
Clasificación