实时高亮检索框

效果

<template>

  <div>
    <el-input v-model="input" placeholder="请输入内容"></el-input>
    <p v-html="ruleTitle(content,input)"></p>


  </div>
</template>

<script>
  export default {
    data() {
      return {

        input: '',
        content: `双泽信息技术有限公司是中国翻译服务的领军企业之一，为国内外客户提供科技、工程、法律、项目管理、标准数据、规程规范领域的专业翻译服务。
基于近30年的经验积累，结合最新的人工智能技术，双泽开发了工业智能翻译专家服务系统S-MT，该系统具有高质量、高速度、高经济性等特点。 双泽管理和技术团队由掌握两种语言或多种语言的专业人士构成。
• 专业术语精准、符合工业领域专业语言规范。
• 基于ISO 17100、ISO 9000、EN 15038、ASTM F2575-14等国际权威标准匠心打造。
• 中英文语料精准，深度应用知识图谱、机器学习、自然语言处理等技术。
• 按照ISO、IEC、WTO等国际组织专业划分，S-MT可覆盖70%以上工业领域相关专业。`

      }
    },
    methods: {
      ruleTitle(text, val) {
        // val为输入框中的值     text为筛选数据

        if (!val) return text;
        const result = text.replace(
          new RegExp(val, "g"),
          `<span class="primary_title">${val}</span>`
        );
        return result;
      }
    }

  }
</script>
<style>
  .primary_title {
    background-color: pink;
    height: 20px;
    display: inline-block;
  }
</style>