vue如何实现高亮

实现文本高亮的方法

在Vue中实现文本高亮可以通过多种方式完成，以下是几种常见的方法：

使用v-html指令 通过v-html指令动态插入带有高亮样式的HTML内容。例如，将匹配的文本替换为带有高亮样式的span标签。

<template>
  <div v-html="highlightedText"></div>
</template>

<script>
export default {
  data() {
    return {
      text: 'This is a sample text to highlight',
      searchTerm: 'sample'
    };
  },
  computed: {
    highlightedText() {
      return this.text.replace(
        new RegExp(this.searchTerm, 'gi'),
        match => `<span style="background-color: yellow">${match}</span>`
      );
    }
  }
};
</script>

使用自定义指令 创建一个自定义指令来处理高亮逻辑，这样可以在多个地方复用。

<template>
  <div v-highlight="searchTerm">{{ text }}</div>
</template>

<script>
export default {
  directives: {
    highlight: {
      inserted(el, binding) {
        const text = el.textContent;
        const term = binding.value;
        if (!term) return;

        const regex = new RegExp(term, 'gi');
        el.innerHTML = text.replace(
          regex,
          match => `<span style="background-color: yellow">${match}</span>`
        );
      }
    }
  },
  data() {
    return {
      text: 'This is a sample text to highlight',
      searchTerm: 'sample'
    };
  }
};
</script>

动态高亮搜索关键词

对于搜索场景，可以根据用户输入动态高亮匹配的关键词。

<template>
  <div>
    <input v-model="searchTerm" placeholder="Search..." />
    <div v-html="highlightedText"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: 'This is a sample text to highlight',
      searchTerm: ''
    };
  },
  computed: {
    highlightedText() {
      if (!this.searchTerm) return this.text;
      const regex = new RegExp(this.searchTerm, 'gi');
      return this.text.replace(
        regex,
        match => `<span style="background-color: yellow">${match}</span>`
      );
    }
  }
};
</script>

使用CSS类实现高亮

通过动态绑定CSS类来实现高亮效果，避免直接操作HTML。

<template>
  <div>
    <span
      v-for="(word, index) in words"
      :key="index"
      :class="{ highlight: word.toLowerCase() === searchTerm.toLowerCase() }"
    >
      {{ word }}
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: 'This is a sample text to highlight',
      searchTerm: 'sample'
    };
  },
  computed: {
    words() {
      return this.text.split(' ');
    }
  }
};
</script>

<style>
.highlight {
  background-color: yellow;
}
</style>

高亮多个关键词

如果需要高亮多个关键词，可以扩展逻辑以支持数组形式的搜索词。

<template>
  <div v-html="highlightedText"></div>
</template>

<script>
export default {
  data() {
    return {
      text: 'This is a sample text to highlight multiple words',
      searchTerms: ['sample', 'highlight']
    };
  },
  computed: {
    highlightedText() {
      let result = this.text;
      this.searchTerms.forEach(term => {
        const regex = new RegExp(term, 'gi');
        result = result.replace(
          regex,
          match => `<span style="background-color: yellow">${match}</span>`
        );
      });
      return result;
    }
  }
};
</script>

使用第三方库

对于更复杂的高亮需求，可以使用第三方库如mark.js。

安装mark.js：

npm install mark.js

在Vue中使用：

<template>
  <div ref="content">{{ text }}</div>
</template>

<script>
import Mark from 'mark.js';
export default {
  data() {
    return {
      text: 'This is a sample text to highlight',
      searchTerm: 'sample'
    };
  },
  mounted() {
    this.highlightText();
  },
  methods: {
    highlightText() {
      const markInstance = new Mark(this.$refs.content);
      markInstance.unmark();
      markInstance.mark(this.searchTerm, {
        className: 'highlight'
      });
    }
  },
  watch: {
    searchTerm() {
      this.highlightText();
    }
  }
};
</script>

<style>
.highlight {
  background-color: yellow;
}
</style>

以上方法可以根据具体需求选择合适的方式实现文本高亮功能。