這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

今天有一個需求，點擊選中某個英文單詞，然后對這個單詞做一些處理，例如高亮背景、查看一些詳細資訊等等，今天簡單實作了一下，效果如下：（支持移動端，chrome和sarafi瀏覽器均能正常使用，語言?? vue3 + typescript)

選詞

由于要動態添加給某些單詞動態添加一些標簽，我們這里可以考慮使用v-html，

首先我們先撰寫一下簡單的結構

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

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

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

然后，我們將需要處理的短文變換為span標簽包裹，這里的思路是按照空格劃分，然后添加span結構，最后拼接到一起回傳，這里有一些邊緣條件要考慮，比如can't、(which、yes!等等，按照空格劃分出來的資料有一點問題，

如果不做處理的話，一些標點符號也會高亮出來，就不太正確了，下面是處理邏輯，整體比較簡單，就不解釋了，

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  @click="setColor($event)" v-html="shortArticle"></div>
</template>

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

在父親元素上添加點擊事件，觸發事件點擊之后，呼叫setColor函式，高亮背景（添加class）

不過有一點小小的問題，點擊div的空白區域或者非英文單詞區域會直接整個背景變成紅色，控制臺列印event.target.innerText可以發現它的值為整個文本，所以我們可以根據判斷列印的文本長度和需要設定的文本長度是否一致來解決這個問題，（ps：??面的示例代碼str字串使用了反引號模板字串，直接使用下面會影響結果）

function setColor(event: any) {
  // console.log(event.target.innerText)
  if(str !== event.target.innerText){
    event.target?.classList.add('word_highlight')
  }
}

對于event.target不太了解的伙伴可以看這篇文章 ?? Event.target - Web API 介面參考 | MDN (mozilla.org)

(和event.target類似的還有一個屬性event.currentTarget，不太了解的伙伴可以看下這篇文章 ?? Event.currentTarget - Web API 介面參考 | MDN (mozilla.org)，它倆的區別是event.target指的是事件觸發的元素，而event.currentTarget指的是事件系結的元素）