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

const getLeafNode = (node): any[] => {
  // 獲取全部的葉子節(jié)點(diǎn)
  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>