我看了你的帖子中提到的stackoverflow answer，并提出了以下解决方案。
1.使用将spans添加到每个单词的解决方案
1.在事件处理程序中，您可以检查是否存在任何样式。对于我们的例子，我们可以检查是否存在color属性，即event.target.style.color
1.如果它确实存在，那么你知道这已经被点击，你可以恢复颜色，以您的选择
1.如果它不存在，那么你知道这是第一次点击它，可以设置颜色为您的选择

var page = '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: {
    page: ''
  },
  computed: {
    pageContent() {
      return this.page.replace(/\b(\w+?)\b/g, '<span>$1</span>')
    }
  },
  methods: {
    doSomething(e) {
      if (e.target.style.color) {
        //Revert back to black text
        e.target.style = 'color: black;';
      } else {
        //Change text color to yellow
        e.target.style = 'color: yellow;';
      }
      console.log(e.target.textContent);
    }
  },
  created() {
    // load external data
    this.page = page
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p @click="doSomething" v-html="pageContent"></p>
</div>

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>

• 注：此代码不是我想的。它是从上面的stackoverflow链接复制粘贴的。只是修改了它的场景：）*

我也不知道什么是vue lol

使用\b正则表达式将文本拆分为单词，使每个单词都是自己的，然后突出显示这些单词
操场

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  data: () => ({
    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.',
    selectedWord: 'cu'
  }),
  computed: {
    words() {
      // split by `\b` - the "word border"
      // [ "Lorem", " ", "ipsum", " ", "dolor", " ", "sit", " ", "amet", ", ", ...]
      return this.book.match(/\b.+?\b/g)
    }
  },
  methods: {
    select(word) {
      this.selectedWord = word
    },
    isSelected(word) {
      return word.toLowerCase() === this.selectedWord.toLowerCase()
    }
  }
})
</script>

<template>
  <input v-model="selectedWord">
  <p>
    <span v-for="w of words" @click="select(w)" :class="{ 'selected-word': isSelected(w) }">
      {{ w }}
    </span>
  </p>
</template>

<style scoped>
.selected-word {
  background: yellow;
}
</style>

您可以获取相对于最近段落元素的绝对anchorOffset，然后查找开始/结束索引，以确定单击了哪个单词。确保索引是从端到端排序的，这样替换不会移动子串的位置。
您可以将每个开始/结束位置存储为一个状态，并使用替换的单词（突出显示）重新呈现原始文本。

const 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: { book: '', indices: [] },
  methods: {
    highlightWord({ currentTarget: { textContent } }) {
      const { endIndex } = getAbsoluteSelection();
      const cursor = findWordBounds(textContent, endIndex);
      if (cursor) {
        toggleItem(this.indices, cursor, compareCursors);
        this.book = applyHighlights(book, this.indices);
      }
    }
  },
  created() {
    this.book = book;
  }
});

const findWordBounds = (content, pos) => {
  let startIndex = pos, endIndex = pos;
  while (startIndex > 0 && /\w/.test(content[startIndex])) {
    startIndex--;
  }
  while (endIndex < content.length && /\w/.test(content[endIndex])) {
    endIndex++;
  }
  if (content[startIndex] === ' ') {
    startIndex++;
  }
  const word = content.substring(startIndex, endIndex);
  if (word.trim().length === 0) return null;
  return { startIndex, endIndex };
};

const toggleItem = (list, item, comparator) => {
  const foundIndex = list.findIndex((curr) =>
    comparator(curr, item) === 0);
  if (foundIndex !== -1) {
    list.splice(foundIndex, 1);
  } else {
    list.push(item);
    list.sort(comparator);
  }
};

const replaceAtIndex = (content, startIndex, endIndex, replacer) => {
  const head = content.substring(0, startIndex);
  const word = content.substring(startIndex, endIndex);
  const tail = content.substring(endIndex);
  return head + replacer(word) + tail;
};

const highlightWord = (word) =>
  `<span class="highlight">${word}</span>`;

const applyHighlights = (content, indices) => {
  let html = content;
  for (let { startIndex, endIndex } of indices) {
    html = replaceAtIndex(html, startIndex, endIndex, highlightWord);
  }
  return html;
};

// Sort largest to smallest
const compareCursors = (a, b) =>
  b.endIndex - a.endIndex || b.startIndex - a.startIndex;

// Get absolute anchor offset relative to closest paragraph element.
// Based on: https://stackoverflow.com/q/66336616/1762224
function getAbsoluteSelection() {
  const selection = window.getSelection();
  const start = selection.anchorOffset;
  const end = selection.extentOffset;
  const anchorNode = selection.anchorNode;
  const extentNode = selection.extentNode;
  const startIndex = calculateOffset(anchorNode, start);
  const endIndex = calculateOffset(extentNode, end);
  return { startIndex, endIndex };
}
function calculateOffset(child, relativeOffset) {
  let parent = child.parentElement;
  if (parent.tagName !== 'P') {
    parent = parent.closest('p');
    child = child.parentElement;
  }
  const children = [];
  for (let c of parent.childNodes) {
    if (c === child) break;
    children.push(c);
  }
  return relativeOffset + children.reduce((a, c) => a + c.textContent.length, 0);
}

.highlight {
  background-color: yellow;
}

#app > p {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p @click="highlightWord" v-html="book"></p>
</div>

这里是相对与绝对选择锚位置的演示。选择始终相对于最近的图元。

const infoEl = document.querySelector('#info')

document.querySelector('.outer')
    .addEventListener('click', updateOffset);

updateInfo(-1, -1);

function updateOffset(e) {
    const outer = e.target.currentTarget; // Outer
  const inner = e.target.target; // Selection target (relative)
    const relativeOffset = window.getSelection().anchorOffset;
  const absoluteOffset = getAbsoluteSelection().endIndex;
  updateInfo(relativeOffset, absoluteOffset);
}

function updateInfo(relativeOffset, absoluteOffset) {
    infoEl.textContent = `
    Relative Offset: ${relativeOffset}
    Absolute Offset: ${absoluteOffset}
  `.trim().replace(/^\s+/gm, '');
}

// Based on: https://stackoverflow.com/q/66336616/1762224
function getAbsoluteSelection() {
  const selection = window.getSelection();
  const start = selection.anchorOffset;
  const end = selection.extentOffset;
  const anchorNode = selection.anchorNode;
  const extentNode = selection.extentNode;
  const startIndex = calculateOffset(anchorNode, start);
  const endIndex = calculateOffset(extentNode, end);
  return { startIndex, endIndex };
}

function calculateOffset(child, relativeOffset) {
  let parent = child.parentElement;
  if (parent.tagName !== 'P') {
    parent = parent.closest('p');
    child = child.parentElement;
  }
  const children = [];
  for (let c of parent.childNodes) {
    if (c === child) break;
    children.push(c);
  }
  return relativeOffset + children.reduce((a, c) => a + c.textContent.length, 0);
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #222;
  color: #EEE;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.outer {
  font-size: 2rem;
}

.outer:hover {
  cursor: pointer;
}

.inner {
  text-decoration: underline;
}

#info {
  width: 10rem;
  min-height: 2rem;
  padding: 0.25rem;
  border: thin solid grey;
  font-family: monospace;
  white-space: pre;
}

<p class="outer">Hello <span class="inner">this</span> is <span class="inner">simply</span> a <span class="inner">test</span></p>
<div id="info"></div>

这里是Halapgos 1解决方案的修改版本。我简化了逻辑，只在事件目标元素上切换.highlight类。

const page = '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: { page: '' },
  computed: {
    pageContent() {
      return this.page.replace(/\b(\w+)\b/g, '<span>$1</span>');
    }
  },
  methods: {
    highlightWord({ target }) {
      target.classList.toggle('highlight');
    }
  },
  created() {
    this.page = page;
  }
})

.highlight {
  background: yellow;
}

#app > p:hover {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p @click="highlightWord" v-html="pageContent"></p>
</div>