这样的蝌蚪文是怎么生成的

Question

js混淆成为这样的蝌蚪纹，在浏览器里面复制会位移，这是怎么生成的。

Answer 1

• 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/717641
• 这篇博客你也可以参考下：哇哦，弹幕居然是这么弄出来的，一文学会如何用js制作一个弹幕效果
• 除此之外, 这篇博客: 裂图怎么显示成默认图片，基础原始js面试题中的 我们在使用图片的时候，经常会遇到图片加载失败的情况 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 我们可以通过一些处理在让他加载默认图片，或者别的图片

  <img src="https://img0.baidu.com/it/u=297780656,1813209409&fm=11&fmt=auto&gp=0.jpg" alt="" onerror="imgerrorfun()">
  
  function imgerrorfun(){ 
          let img=document.querySelector('img'); 
          img.src="https://img0.baidu.com/it/u=3870964477,3746012709&fm=26&fmt=auto&gp=0.jpg"; 
          img.onerror=null; //控制不要一直跳动 
     } 
  

• 您还可以看一下 黄菊华老师的微信小程序前端程序设计和JS入门到精通课程中的 微信小程序入门到就业课（全栈课）学习说明【建议看下】小节, 巩固相关知识点
  
• 以下回答由chatgpt基于相关博客总结生成:

  蝌蚪文是通过在字符之间添加特殊的unicode字符实现的。具体步骤如下：

  1. 准备一个包含蝌蚪文字符的数组（例如：['\u0303', '\u0310', '\u0315', '\u032F', '\u0333', '\u0335']），这些字符会在混淆后的代码中产生位移效果。

  2. 将要混淆的代码转换为字符串形式。

  3. 遍历每个字符，如果该字符是一个可显示的字符，则在该字符前后插入一个随机选择的蝌蚪文字符。

  4. 将混淆后的字符串输出。

  下面是一个示例的JavaScript代码实现：

  function generateZalgoText(text) {
    const zalgoChars = ['\u0303', '\u0310', '\u0315', '\u032F', '\u0333', '\u0335'];
    let zalgoText = '';
  
    for (let i = 0; i < text.length; i++) {
      zalgoText += text[i];
  
      // 如果字符是可显示的字符，则添加蝌蚪文字符
      if (text[i].match(/[\u0020-\u007E]/)) {
        const randomIndex = Math.floor(Math.random() * zalgoChars.length);
        zalgoText += zalgoChars[randomIndex];
      }
    }
  
    return zalgoText;
  }
  
  const originalText = "Hello World!";
  const zalgoText = generateZalgoText(originalText);
  console.log(zalgoText);
  

  运行以上代码，将会生成类似下面的蝌蚪文字符："H̵̳̆͊̚e̶̯̐̆̐l̷͈̽̏l̵̠͛̈́o̴̰̎͆͘ ̸̢̍̈W̵̡̅͐ö̸͈r̶̭̾̅͠l̵͍̐̎d̷͕̈́̃!̸̝̐"

  至于为什么复制时会出现位移效果，这是因为浏览器会尝试将蝌蚪文字符解析成Unicode字符，而Unicode字符包含多个代码点，每个代码点都占据一个位置。所以在复制时，浏览器会根据代码点的个数调整字符的位移，从而产生位移效果。

  以上是一种生成蝌蚪文的方法，但可能还有其他的方法可以实现类似的效果。