文本关键词高亮-vue版本

  • 文本关键词高亮-vue版本已关闭评论
  • 65 次浏览
  • A+
所属分类:Web前端
摘要

、、 、、 

、、

<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>

 

、、