文本关键词高亮-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>