Code for highlighting keywords in search results in vue2

The content of this article is about the code for highlighting keywords in search results in vue2. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

// Filter color change

brightenKeyword(val, keyword) {
   val = val + '';
   if (val.indexOf(keyword) !== -1 && keyword !== '') {
        return val.replace(keyword, '<font color="#409EFF">' + keyword + '</font>')
   } else {
      return val
    }
}

// Usage method

<el-table-column label="维护内容">
   <template slot-scope="scope">
      <span v-html="brightenKeyword(scope.row.strContent, filters.strContent)" ></span>
   </template>
</el-table-column>

Open source project address: https://github.com/alex-0407/...

Related recommendations:

JS’s regular replace search keyword highlighting effect

Use JS to highlight the search keywords Implementation code_javascript skills

The above is the detailed content of Code for highlighting keywords in search results in vue2. For more information, please follow other related articles on the PHP Chinese website!