フロントエンドの Vue 開発、複数のキーワードで検索すると検索結果が強調表示される (英語入力時に html タグが正しく表示されない問題を解決)

問題の背景:

検索結果のハイライトに関するインターネット検索は、基本的には単一キーワード検索、または複数キーワード検索ですが、英字入力時のhtmlタグのレンダリングの問題は解決しません。;s 検索が実行され、
データがレンダリングされるときに html のハイライトが表示されるように、span タグが解析されてから強調表示される場合があります。

エラーは次の図に示されています。

ソリューション

複数キーワード検索なので、まずはキーワードをデータに変換し、キーワードとテキスト情報を巡回比較し、重複している場合は強調表示します
。前の最初のキーワード キーワードが表示されている場合、この時点で html タグはテキスト内に既に存在します
. このとき、html タグを特殊記号に変換し、これらすべての特殊記号の代表的な内容を配列に入れ、次に、html ラベルを強調表示してレンダリングし
、完了後、元の特殊記号を置き換え、順番に表示する必要がある html ラベルに置き換えます。

解決

検索誘導により、次の方法を使用して、複数のキーワードの検索結果を強調表示する問題を解決できます。

<div id="content">
    aaaaassssaaassddddwwwssaaa
</div>

<script>
    function hightLight() {
      
      
        let textEle = document.getElementById('content');  //获取文本内容；
        var text = textEle.innerHTML
        let searchKeywords = 's;a;w';  //为了方便演示，这里关键词直接写死
        searchKeywords = searchKeywords.replace(/;|；/g, ',');
        let searchArray = [];
        searchArray = searchKeywords.split(',');//把关键词列为一个数组

        searchArray.forEach((keyword) => {
      
        //循环关键词数组
            if (keyword && text.indexOf(keyword) !== -1) {
      
      
                let regHtml = new RegExp("\<.*?\>", "ig"); //定义html正则
                let dealHtml = text.match(regHtml);  //符合的html定义一个数组
                let num = -1;
                text = text.replace(regHtml, '{~}'); //用一个特殊字符进行替换
                text = text.replace(new RegExp(keyword, 'g'), `<span style="color:#1890FF;">${ 
        keyword}</span>`);
                //把原来~代表的html标签，再替换回来
                text = text.replace(/{~}/g, function () {
      
      
                    num++;
                    return dealHtml[num];  //进行依次替换
                });
            }
        })

        textEle.innerHTML = text;

    }
    hightLight();
</script>

レンダリング

すべての英語が強調表示され、html が表示されていないことがわかります。