vue+ts 内容中关键字高亮显示

1.工具 highlight.ts (单独创建一文件)

// 关键词在评论中高亮
export class highlight {
    static getHighlight (concent:string, keyword:string) {
        let replaceReg = new RegExp(keyword, 'g'); //正则
        let replaceString = '<span class="search-text">' + keyword + '</span>'; //拼接
        let titleString:any = concent.replace(replaceReg, replaceString); //替换
        return titleString 
    }
}

2.使用

// vue页面 我是的在table中所以scope.row.xxxx
<span v-html="getHighlightContent(scope.row.content,reviewKeyword)"></span>

<script lang="ts">
    import {highlight} from "@/components/highlight"; //引用
    
    // content: 显示内容,keyword: 需高亮的词
    getHighlightContent(content: string,keyword: string) {
        return highlight.getHighlight(content,keyword)
    }
</script>