[vue] Vue は検索コンテンツ内のテキストの強調表示と結果内のテキストの強調表示を実装します

レンダリングから始めましょう

実はこの機能を実装しようと思ってBaiduに夢中になったのですが、あまり満足のいくものではなかったので、しばらく手探りして最初に使用したナレッジポイントについてお話しさせていただきます。

1.通常の全文一致を置き換えます (ここでの主な理由は、デフォルトで replace が最初の要素を置き換えるため、通常の規則性が使用されるためです)

2. 分割された文字列を配列に変換する

3、v-html 

さて、それではまずコードを見てください

  <div  v-html="brightenKeyword(content,keyword)"></div>

html 部分については、非常に簡単です。v-html タグを使用すると、操作の結果が出力されます。brightenKeyword は、以下で作成したメソッドです。その 2 つのパラメーター (最初のパラメーターの content) は、表示するテキストの内容です。つまり、コンテンツを横断してキーワードを探したいのです。キーワードは検索するコンテンツです。

具体的な方法は以下の通りです まず、キーワードを配列に分けて走査します コンテンツ内にキーワードがあれば置換します 置換には正規表現を使用します 非常に単純な正規表現とは全文置換を意味します. キーワードに遭遇すると赤くなり、変更された内容を返します. v-htmlを使用するとタグやスタイルを自ら読み込んでくれます。

  //搜索高亮
    brightenKeyword(val, keyword) {
      if (keyword.length > 0) {
        let keywordArr = keyword.split("");
        val = val + "";
        keywordArr.forEach(item => {
          if (val.indexOf(item) !== -1 && item !== "") {
            val = val.replace(
              new RegExp(item,'g'),
              '<font color="#f75353">' + item + "</font>"
            );
          }
        });
        return val;
      } else {
        return val;
      }
    }