<template>
  <div>
    <input v-model="searchValue" /> 
    <button @click="search">search</button> 
    <div>搜索到的個數(shù)：{{result.length}}</div>
    <div>搜索到的內(nèi)容：{{result}}</div>
    <br/>
    <WordHighlighter
      highlightClass="highlight"
      :query="lightQuery"
      :caseSensitive="false"
      :splitBySpace="true"
      @matches="lightEmit">
	<div>
	  我已經(jīng)遠離了你的河流，絕不是疏遠，因為我已是身居異土。遠遠地，依然聽得到你翻山越嶺、日夜兼程的腳步聲，依然無比清晰地看得到你的那條灑滿星星的清澈的河流。只要，也只有想起你——故鄉(xiāng)，就是異域的那條河流也會灑滿故鄉(xiāng)的星星。無論醒著還是沉睡，都會重復著那個讓人心旌搖曳的畫面，星星都在你的河流里百媚地眨眼。因為那條灑滿星星的河流途經(jīng)我無猜的孩童，無知的少年，迷茫的青春，還要經(jīng)過可知的未來，是不是今后還要交付給大海了呢？那樣，大海的那些星星一定是故鄉(xiāng)送給他們的饋贈，沒有故鄉(xiāng)的孕育，大海也會失去靈氣，因為大海的源頭就在故鄉(xiāng)的這頭……

	  星星的感情，在城市里總是被耽誤。是星星的感情單一，還是城市的濫情呢？如果城市是舞臺，星星就不是市民，所以也不是演員。如果天空是舞臺，星星就是居民，所以能成為明星。如果河流是舞臺，星星就是精靈，她就是大地的靈魂。如今，愛情在城市里就是一個錯誤，比金錢的質(zhì)量輕百倍，所以比海洛因更危險。愛情在鄉(xiāng)村的河流里，就有了星星的光輝，成就的是海枯石爛的傳奇……

	  晴空萬里的白晝，總愛涂脂抹粉打扮一番。這樣的時候，只有清泉敢從濃妝艷抹的云端踏過，只有披著滿身星星的魚兒敢從藍天穿過，將自滿表現(xiàn)的太陽戲弄一番。漿洗的女人們總愛把笑聲拋在河面上，拍打著棒槌當爵士樂的節(jié)拍，委婉的歌聲隨著幸福的河水流淌，斑斕的衣服在白云間飄舞成了彩虹。我聽到了大地與天空的竊語，徹底悟出了薩頂頂唱的《萬物生》里的深刻與凝重：我看見山鷹在寂寞兩條魚上飛 ，兩條魚兒穿過海一樣咸的河水， 一片河水落下來遇見人們破碎 ，人們在行走，身上落滿山鷹的灰……

          睡得沉沉的夜，呵欠連連，漫長得沒有盡頭，無論夜幾多的黑，可故鄉(xiāng)的河流從也不會迷路，因為有星星這明亮的眼睛。你的人生沒有迷路，你的夢沒有迷失方向，你的未來總在奔跑的路上，是不是也是借了故鄉(xiāng)河流里的星星做慧眼呢？如果河流看不到星星，那肯定會落魄的。如果人生看不到那條飄著星星的河流，如果夢里沒有那條飄著星星的河流，如果未來的路上沒有那條飄著星星的河流，你是不是都會驚慌失措呢？陌生人能通過那條河流找到你的家，如果沒有了她你的心能到家嗎？
        </div>
     </WordHighlighter>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import WordHighlighter from "vue-word-highlighter";

export default defineComponent({
  name: "App",
  components: {
    WordHighlighter,
  },
  setup() {
    const searchValue = ref<string>();
    const lightQuery = ref<string>();
    const result = ref<Array<string>>([]);

    const search = () => {
      lightQuery.value = searchValue.value;
    };

    const lightEmit = (e: Array<string>) => {
      result.value = e
    }

    return {
        searchValue,
        lightQuery,
        result,
        search,
        lightEmit
    };
  },
});
</script>

<style>
.highlight{
  background-color: transparent;
  color: red;
  font-weight: bold;
}
</style>

function fn(content, keywordArray) {
  if(keywordArray.length === 0) return;

  keywordArray.forEach(keyword => {
    if(keyword && content.indexOf(keyword) !== -1) {
      content = content.replace(new RegExp(keyword, 'g'), `<mark>${keyword}</mark>`);
    }
  });

  return content;
}