如何实现搜索关键词高亮

如何将字符串中的指定字符在网页中高亮展示？

"Hello World"

将需要高亮的字符包裹 HTML 标签，为其单独设置颜色。

"Hello <span style="color: red">World</span>"

在 Vue 中如何渲染带有 HTML 标签的文本？

<template>
	<div>
    <!-- 原文输出 -->
  	<div>{
  { str }}</div>
    
    <!-- 当作 HTML 输出 -->
    <div v-html="str"></div>
  </div>
</template>

<script>
export default {
    
  data () {
    
    return {
    
      str: 'Hello <span style="color: red">World<span>'
    }
  }