在接单群接到个小活，搞清楚需求之后发现是渲染html内容然后实现点击单词触发事件。实现效果就是这样题外话：这个单子都不知道被转手多少次了，群里有客户，一手中介，二手中介，一手接活人（没实现到，有点忙研究这个费时间）

求职中，有成都/上海的不卡本科前端的工作可以联系下。

开搞开搞

第一阶段使用 Kimi 月之暗面和通义灵码

无效，继续

还是无效

又加上了自定义指令还是无效

使用MutationObserver也还是无效

kimi那边的消息记录清空了，没有截图了。

第二阶段换一种方法

kimi那边也是差不多是这种方法方法依然不行

又参考了这个文章来实现

juejin.cn/post/722373...

kimi读取之后也没完全实现需求

第三阶段又换方法

问gpt3.5还说是什么解析dom，还用上了外部库，也没有解决掉问题。最后总结了gpt3.5给的回复又去问了gpt4，gpt使用了正则法。每天免费一次机会，所以把需要限制的条件都要说清楚。

vbnet 复制代码

          content: `
          <p style="">Yang Hui was born in Longyuan, Fujian. She grew up in a small village. She lost all her fingers and feet when she was three. She was badly burnt by accident when she went out with her grandparents. She couldn't walk and she seldom went out.</p> \r 
          <p style="">The young girl had to learn to do everything. At first she wasn't able to use chopsticks. Her parents had to teach her for a long time. Thanks to her strong <u>will</u> to do everything by herself, she overcame those difficult times. Now she can look after herself. She also loves studying and she has finished the junior high school courses.<br> About five years ago, Yang Hui saw someone make cross-stitch（十字绣）and she decided to learn to make it herself. As you can imagine, it's very difficult to make it without fingers. Yang Hui failed so many times. But she never gave up. And through many hours of practice, now she can use her arms to make good cross-stitch works and she is faster than other people. "One had to put great efforts into what she was doing." Yang Hui said.</p> \r 
          <p style="">Now she is 21 years old and she is in hospital in Fujian. She continues making a 1.83-meter-long cross-stitch work with arms. She has no enough money for her operations（手术）. Many kind-hearted people come to visit her and call on people to raise money for her.</p> \r 
          <p style="">As for her future, Yang Hui said, "I hope to stand up and walk one day after operations. I want to make more money by selling cross-stitch works."</p> \r 
          <p style="">If you want to know more about Yang Hui and help her, please call 13004982348,</p> \r 
          <p style="">                       (<i>From Fuzhou News</i>)</p>
        `,    
这是一个html字符串，我现在请你写一个js方法，为html标签里面的每个英语单词加上span标签，class名称为ceshi，不要修改标签的英文，不要使用外部解析库来实现这个功能。
也就是可以将给定的HTML字符串作为参数传递给这个方法，它将返回一个新的字符串，其中每个英语单词都被添加了<span class="ceshi">标签，同时保留了原来的HTML标签和内容。

gpt4回复了这个

js 复制代码

function wrapWordsWithSpan(htmlContent) {
  // 正则表达式，匹配英文单词并忽略HTML标签内的内容
  const regex = /(?<=^|>|\s)([a-zA-Z]+)(?=<|\s|$)/g;
  return htmlContent.replace(
    regex,
    (match) => `<span class="ceshi" data-word="${match}">${match}</span>`
  );
}

经过测试可以用，倒是英文后面也有标点符号的没实现效果，又去跟kimi对战几个回合才给出了可以用的正则。

javascript 复制代码

const regex = /(?<=^|\s|>)([a-zA-Z]+)(?=[.,;:!?]|\s|<|$)/g;

总结

从参考文章得出的思路就是给每个英语单词加上一个 span 标签，然后给每个标签加上点击事件。

完整代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue 2 Example</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <div class="container" v-html="content"></div>
    </div>

    <script>
      function wrapWordsWithSpan(htmlContent) {
        // 正则表达式，匹配英文单词并忽略HTML标签内的内容
        // const regex = /(?<=^|>|\s)([a-zA-Z]+)(?=<|\s|$)/g;
        const regex = /(?<=^|\s|>)([a-zA-Z]+)(?=[.,;:!?]|\s|<|$)/g;
        return htmlContent.replace(
          regex,
          (match) => `<span class="ceshi" data-word="${match}">${match}</span>`
        );
      }

      new Vue({
        el: "#app",
        data: {
          content: `
          <p style="">Yang Hui was born in Longyuan, Fujian. She grew up in a small village. She lost all her fingers and feet when she was three. She was badly burnt by accident when she went out with her grandparents. She couldn't walk and she seldom went out.</p> \r 
          <p style="">The young girl had to learn to do everything. At first she wasn't able to use chopsticks. Her parents had to teach her for a long time. Thanks to her strong <u>will</u> to do everything by herself, she overcame those difficult times. Now she can look after herself. She also loves studying and she has finished the junior high school courses.<br> About five years ago, Yang Hui saw someone make cross-stitch（十字绣）and she decided to learn to make it herself. As you can imagine, it's very difficult to make it without fingers. Yang Hui failed so many times. But she never gave up. And through many hours of practice, now she can use her arms to make good cross-stitch works and she is faster than other people. "One had to put great efforts into what she was doing." Yang Hui said.</p> \r 
          <p style="">Now she is 21 years old and she is in hospital in Fujian. She continues making a 1.83-meter-long cross-stitch work with arms. She has no enough money for her operations（手术）. Many kind-hearted people come to visit her and call on people to raise money for her.</p> \r 
          <p style="">As for her future, Yang Hui said, "I hope to stand up and walk one day after operations. I want to make more money by selling cross-stitch works."</p> \r 
          <p style="">If you want to know more about Yang Hui and help her, please call 13004982348,</p> \r 
          <p style="">                       (<i>From Fuzhou News</i>)</p>
        `,
        },
        methods: {
          clickWord(event) {
            // 获取点击的span元素
            const span = event.target;
            // 获取span元素的文本内容
            const word = span.textContent || span.innerText;
            if (word) {
              this.printWord(word);
            }
          },
          printWord(word) {
            console.log("点击的单词", word);
            alert(`The word you clicked is: ${word}`);
          },
        },
        mounted() {
          // 使用 wrapEnglishWordsInSpans 方法处理 content 字符串
          this.content = wrapWordsWithSpan(this.content);
          console.log("mounted", this.content);
          this.$nextTick(() => {
            // 为每个包裹了单词的 span 元素添加点击事件监听器
            const spans = this.$el.querySelectorAll("span.ceshi");
            spans.forEach((span) => {
              span.addEventListener("click", this.clickWord);
            });
          });
        },
        beforeDestroy() {
          // 移除点击事件监听器
          const spans = this.$el.querySelectorAll("span.ceshi");
          spans.forEach((span) => {
            span.removeEventListener("click", this.clickWord);
          });
        },
      });
    </script>
  </body>
</html>

v-html 渲染富文本内容实现点击英语单词触发事件