Vue实现长文本单词点击高亮及重复点击取消高亮问题

要实现点击单词高亮/取消高亮的效果，核心是把文本拆分为可单独交互的单词元素，通过维护高亮状态集合来动态控制样式。下面是修改后的完整代码：

1. 完整代码实现 #

JavaScript 部分 #

var book = 'Lorem ipsum dolor sit amet, cu eum eros vitae persequeris, laudem possit nam ex. Labore eloquentiam per an. Sit ex omnesque interpretaris, habeo tantas eos ad, ea eos ludus inciderint. Facete tritani pro ei, vim evertitur liberavisse ex. Ridens indoctum duo cu, est utamur aliquando expetendis ne. Cum nusquam definiebas ex, id esse neglegentur cum, eu libris bonorum volumus vis. Ius et quis omnis graeco, no his nullam perpetua dissentiet. No vix possim scripserit consequuntur, te mnesarchum philosophia sed. Ne mea putent iudicabit, in eam ipsum viris dicunt. Eum amet accommodare ex, sint malis adversarium at qui.'

new Vue({
  el: '#app',
  data: { 
    wordList: [],
    highlightedWords: [] // 存储高亮的纯单词
  },
  methods: {
    // 分割文本为带原始内容和纯单词的数组
    splitTextIntoWords(text) {
      const regex = /(\w+|[.,:;!?()+-])/g;
      const matches = text.match(regex);
      return matches.map(match => ({
        rawWord: match,
        pureWord: match.replace(/[.,:;!?()+-]/g, '')
      }));
    },
    // 切换单词的高亮状态
    toggleHighlight(pureWord) {
      const index = this.highlightedWords.indexOf(pureWord);
      if (index > -1) {
        this.highlightedWords.splice(index, 1);
      } else {
        this.highlightedWords.push(pureWord);
      }
    }
  },
  created() {
    this.wordList = this.splitTextIntoWords(book);
  }
})

CSS 部分 #

.highlight {
  background-color: yellow;
}

HTML 部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p>
    <span 
      v-for="(item, index) in wordList" 
      :key="index"
      @click="toggleHighlight(item.pureWord)"
      :class="{ highlight: highlightedWords.includes(item.pureWord) }"
    >
      {{ item.rawWord }}&nbsp;
    </span>
  </p>
</div>

2. 关键修改说明 #

• 文本拆分：用正则把原始文本拆分为单词和标点的组合，每个元素保留原始显示内容和纯单词（移除标点），避免标点干扰高亮判断。
• 状态维护：用highlightedWords数组记录当前高亮的纯单词，点击时切换该单词在数组中的存在状态。
• 动态样式：通过v-bind:class判断单词是否在高亮数组中，动态添加/移除highlight类。
• 交互绑定：每个单词元素绑定点击事件，触发高亮切换逻辑。

内容的提问来源于stack exchange，提问作者psychcoder