<script setup lang="ts">
</script>

<template>
  <div class="container" v-html="shortArticle"></div>
</template>

  
<style>
.container {
  font-size: 18px;
}
</style>

function addElementSpan(str: string): string {
  return str
    .split(' ')
    .map((item) => {
      const { start, word, end } = getWord(item)
      return `${start}<span>${word}</span>${end} `
    })
    .join('')
}

function getWord(str: string) {
  let word = ''
  let start = ''
  let end = ''
  let j = str.length - 1
  let i = 0

  while (i < str.length) {
    if (/^[a-zA-Z]$/.test(str[i])) {
      break
    }
    start = start + str[i]
    i += 1
  }

  while (j >= 0) {
    if (/^[a-zA-Z]$/.test(str[j])) {
      break
    }
    end = str[j] + end
    j -= 1
  }

  word = str.slice(i, j + 1)

  // 处理数字
  if (!word && start === end) {
    start = ''
  }

  return {
    start,
    word,
    end
  }
}

<script setup lang="ts">
import { computed } from 'vue'
import { addElementSpan } from './utils'

const str = `It works fine if you move the navbar outside the header. See below. For the reason, according to MDN: The element is positioned according to the normal flow of the document, and then offset
    relative to its flow root and containing block based on the values of top, right, bottom, and
    left. For the containing block: The containing block is the ancestor to which the element is
    relatively positioned So, when I do not misunderstand, the navbar is positioned at offset 0
    within the header as soon as it is scrolled outside the viewport (which, clearly, means, you
    can't see it anymore).`

const shortArticle = computed(() => {
  return addElementSpan(str)
})

function setColor(event: any) {
  // console.log(event.target.innerText) 获取选中的文本
  event.target?.classList.add('word_highlight')
}
</script>

<template>
  <div class="container" @click="setColor($event)" v-html="shortArticle"></div>
</template>

<style>
.word_highlight {
  background-color: red;
}
</style>