文本關鍵詞高亮-vue版本

、、

<template>
<div>
  <div>
    <input type="text" @keyup.enter="mark">
  </div>
  <div ref="text" style="height: 200px; overflow: auto" v-html="html">

  </div>
  </div>
</template>

<script setup lang="ts">
import * as cheerio from 'cheerio';
import { ref } from 'vue';

const text = ref()
const html = ref(
    '<p>個人思想編輯 <span>播報</span></p>' +
    '<p>超長期投資——“超長期投資是我的信念和信仰。總結來講，第一點是把基金做成超長期結構的基金，第二點是所投公司和投資基金的理念要完全一致。”</p>' +
    '<p>投具有偉大格局觀的企業家——“特別少的人，特別少的公司能夠有這個格局、執行力、能夠把公司願景推到那麼高的高度，我們就要尋找這樣的人。找到這個人有兩種模式：一種模式是人海模式，到處參加各種會議，一個地方一個地方跑。我們採用的是研究型模式，就是通過研究發現哪個是最好的商業模式，然後我們再尋找跟最好商業模式契合的最好創業者，我們再一起發展。”</p>' +
    '<p>善於甄別“虛假的護城河”——“我經常在公司內部強調我們要善於甄別“虛假的護城河”，譬如政府保護，這類的護城河隨時都有可能崩潰。而長期創造最大價值的，並用最高效的方式和最低的成本創造最大價值的才是企業“護城河”的本質。”</p>' +
    '<p>在關鍵的時點投資關鍵的變<span>化</span>——關鍵時點就是大家都看不懂的時候。關鍵變化就是：如果是一成不變的事情，實際上很容易被看見，這個世界永恆的只有變化。只有在變化的過程中我們才能去跟別人有不同的觀點，而且是產生非常長期的不同觀點。我關註的是創造多大價值的機會，這就是我說的深入基本研究，在這個過程中我們多年來一直堅持持續深入的跨時間、跨地區、跨行業、跨類別、跨線上/線下的行業研究，所以高瓴能夠深刻理解這些行業的長期內在發展規律和業務邏輯，從而準確把握行業與市場的變革要素和時點。”</p>' +
    '<p>投資哲學：“守正用奇”、“弱水三千，但取一瓢”、“桃李不言，下自成蹊”。——“我有三個哲學觀，也是在公司里反覆強調並實踐的。分別是：“守正用奇”、“弱水三千，但取一瓢”和“桃李不言，下自成蹊”。“守正用奇”語出老子《道德經》的“以正治國，以奇用兵”；“弱水三千，但取一瓢”引申自《論語》，是說看準了好的公司或業務模式就要下重註。而“桃李不言，下自成蹊”出自《史記》，是說只要做正確的事情，不用去到處宣傳，好的企業家會找到我們。”</p>' +
    '<p>長期主義——長期主義不僅僅是投資人應該遵循的內心法則，它可以成為重新看待這個世界的絕佳視角。因為，於個人而言，長期主義是一種清醒，幫助人們建立理性的認知框架，不受短期誘惑和繁雜噪音的影響。於企業和企業家而言，長期主義是一種格局，幫助企業拒絕禁錮的零和游戲，在不斷創新、不斷創造價值的歷程中，重塑企業的動態護城河。於社會而言，長期主義是一種熱忱，無數力量匯聚到支撐人類長期發展的基礎領域，關註教育、科學和人文，形成一個生生不息、持續發展的正向迴圈。無論是個人、企業還是社會，只要在長期的維度上，把事情看清楚想透徹，把價值創造出來，就能走在一條康莊大道上。 [20]</p>' +
    '<p>個人語錄編輯 <span><span>播</span><span>報</span></span></p>' +
    '<p>“我要做企業的超長期合伙人，這是我的信念。高瓴的使命就是發掘最具有長期競爭優勢的企業，用最長線的錢來幫助企業實現長期價值。我們相信那些能長期為消費者帶來價值、為產業鏈提高效率、‘護城河’足夠深的商業模式能夠帶來長期的高資本回報率。”</p>' +
    '<p>“我要找的是具有偉大格局觀的堅定實踐者。”</p>' +
    '<p>“要研究，只有研究才能讓你對變化有理解。研究是基於深刻的對事物本質的研究，方法見仁見智，有的人看一兩個季度，有的人看一兩年，有的人看盈利，我看東西是看看五年、十年、二十年的東西。我看的不是形式，我看的是一個人本質上給社會有沒有創造價值，只要你給社會創造很大的價值，早晚你會給所創的公司創造價值。”</p>' +
    '<p>“我把投資大致分為兩類，一種是零和游戲，一種是蛋糕做大游戲。很多人的投資是前者，比如pre-IPO這種，我個人是不相信零和游戲的。我喜歡把蛋糕做大的游戲，就是我的思想、資本不能創造價值，我是不會投資的。”</p>' +
    '<p>“我覺得“真正的護城河”是長期創造最大價值的，而且用最高效的方式和最低的成本創造最大價值。怎麼創造這種價值，在不同的環境和不同的時代是不一樣的。在美國，二十世紀五十年代，品牌是最大化、最快創造價值的“護城河”，而隨著互聯網對品牌的衝擊，品牌價值的護城河又不見得是最高效的方式，有人說在網上通過意見領袖創造價值效率更高。如我剛纔說的，這個世界永恆的只有變化，護城河也不可能不變，優秀的公司是當互聯網大潮襲來時，能夠深挖自己的“護城河”，主動擁抱互聯網帶來的變化。如果一家企業恆古不變，這種企業永遠不值得投資。”</p>' +
    '<p>“我們認為投公司就是投人，真正的好公司是有限的，真正有格局觀、有胸懷又有執行力的創業者也是有限的，不如找最好的公司長期持有，幫助企業家把最好的能力發揮出來。”</p>' +
    '<p>“我本質上是創業家，只是我的專業領域是投資而已。能生活在這個創新層出不窮的時代里，我覺得很幸運。我喜歡想乾大事的企業家，我最大的樂趣就是幫他們實現夢想。”</p>' +
    '<p>“創業中感觸最深的是對價值觀的堅持，不忘初心，方得始終”</p>' +
    '<p>“劉強東非常的真實，我希望創業者更多的是真實，我就是燒錢的，真實的表達自己，總有適合你的投資者，就得真實，但是你別見一個資本家，這個資本家喜歡精耕細作的，你就說我們家就是江澤水鄉來的，你老在變，雖然融資做得很快，但是最後會有問題，我覺得真實是第一重要的，但是由於太多的人在培訓創業家，有太多人培訓資本家，我覺得培養很好，培養技術很好，但是培養的時候要強調他們把自己真實的一面互相曝露出來。” [13]</p>' +
    '<p>"我們正在經歷真正的轉折點，不僅在數量上超越，而且從傻大笨粗的產品出口過度到知識產權的投資、甚至本土業務模式的海外出口。" [14]</p>' +
    '<p>張磊總結出企業創新最關鍵的兩點：首先要是一個學習型組織；其次要有好的企業文化。這樣的企業文化，既不是“你好我好大家好”的家文化（family culture）也不是時刻提心吊膽、視身邊所有人為競爭對手的狼文化（wolf pact culture）。好的企業文化應該是運動員文化（sportsmanship），有運動員的比賽精神，有運動隊的協作精神，失敗之後能站起來，總結經驗教訓，不斷提高自己。 [22]</p>'
)

const getLeafNode = (node): any[] => {
  // 獲取全部的葉子節點
  const child = node.children || [];

  const leafNodes = [...(child.length > 0 ? [] : [node])];

  for (let i = 0; i < child.length; i++) {
    const childLeadNodes = getLeafNode(node.children[i]);
    leafNodes.push(...childLeadNodes);
  }

  return leafNodes;
}

const mark = (e) => {
  cleaMark();

  const key = e.target.value;
  if (!key) {
    return;
  }
  const ch = cheerio.load(html.value);
  const body = ch('body');

  const child = getLeafNode(body[0]);
  console.log(child)

  const replaceReg = new RegExp(key, "ig");
  const replaceString = `<span style="color: #ed4014" high-light-text="high-light-text">${key}</span>`;
  child.forEach(ele => {
    ch(ele).replaceWith(ele.data.replace(replaceReg, replaceString));
  });
  html.value = body.html() || '';
}

const cleaMark = () => {
  const ch = cheerio.load(html.value);

  const body = ch('body');

  const child = getLeafNode(body[0]);

  child.forEach(ele => {
    // console.log(ele)
    if (ch(ele.parent).attr('high-light-text') === 'high-light-text') {
      ch(ele.parent).replaceWith(ele);
    }
  });

  html.value = body.html() || '';
}

</script>

<style scoped>

</style>

、、