文字输出

function output(str) {
        var content = document.querySelector(".content"), jsBlink = document.querySelector("#jsBlink");
        var timer = null, i = 0;
        timer = setInterval(() => {
          // 清空上一次赋值的字符串
          while (jsBlink.previousElementSibling) content.removeChild(jsBlink.previousElementSibling);
          for (var index = 0; index <= i; index++) {
            var elTag = "span", el
            if (str[index] === "\n") elTag = "br"
            el = document.createElement(elTag)

            if (str[index] !== "\n") {
              // 添加类名
              el.className = "word color"+ Math.floor(Math.random() * 24 + 1)
              if (str[index] === " "){
                el.innerHTML = "&nbsp;"
              } else if (str[index] === ">"){
                el.innerHTML = "&gt;"
              } else if (str[index] === "<"){
                el.innerHTML = "&lt;"
              } else {
                el.innerHTML = str[index]
              }
            }
            content.insertBefore(el, jsBlink);
          }

          if (i === str.length - 1) {
            clearInterval(timer);
            timer = null;
          }
          i++;
        }, 200);
 }

// 首先有一个生成指定范围内的随机颜色字符串 color1~color24
      const rdColor = (min, max) => {
        // 生成指定范围内的数字函数
        const randomNum = (min, max) => {
          return Math.floor(Math.random() * (max - min)) + min;
        };
        return `color${randomNum(min, max)}`;
      };
      function output(str) {
        // 字符串拆分为数组
        const arr = str.split("");
        const jsBlink = document.querySelector("#jsBlink");
        // 原数据清空
        Array.from(document.querySelector(".content").children).forEach(
          (element) => {
            if (!element.hasAttribute("id")) {
              document.querySelector(".content").removeChild(element);
            }
          }
        );
        // 遍历数组,并在jsBlinK之前插入
        for (const key in arr) {
          (() => {
            setTimeout(() => {
              // 判断是否为数组当前值是否需要转义
              if (["\n", "<", ">", " "].includes(arr[key])) {
                arr[key] = arr[key].replace(
                  /</g,
                  `<span class="word ${rdColor(1, 24)}">&lt;</span>`
                );
                arr[key] = arr[key].replace(
                  />/g,
                  `<span class="word ${rdColor(1, 24)}">&gt;</span>`
                );
                arr[key] = arr[key].replace(
                  / /g,
                  `<span class="word ${rdColor(1, 24)}">&nbsp;</span>`
                );
                arr[key] = arr[key].replace(/\n/g, "<br />");
                jsBlink.insertAdjacentHTML("beforebegin", arr[key]);
              } else {
                // 不需要转移直接插入
                jsBlink.insertAdjacentHTML(
                  "beforebegin",
                  `<span class="word ${rdColor(1, 24)}">${arr[key]}</span>`
                );
              }
            }, 200 * (+key + 1));
          })();
        }
      }
      output("hello world\n你好世界");

function output(str) {
    var content = document.querySelector('.content');
    var childArr = Array.from(content.children);
    // 闪动节点
    var jsBlink = document.getElementById('jsBlink');
    
    // 闪动节点之前的所有其他节点移除
    childArr.pop();
    childArr.forEach(el=>{
        content.removeChild(el);
    })
    
    var i = 0;
    var timerId = setInterval(()=>{
        if(i<Array.from(str).length){
            var el = Array.from(str)[i];
            // 随机加上 color1 ~ color24 中的任一个class
            var color = 'color' + Math.floor(Math.random()*24+1);
            // 请新建span节点
            var span = document.createElement('span');
            span.className = 'word '+color;

            //HTML转义
            if(/\n/.test(el)){
                span = document.createElement('br');
                console.log(span);
                span.className = '';
            }else if(/</.test(el)){
                span.innerHTML = '&lt;';
            }else if(/>/.test(el)){
                span.innerHTML = '&gt;';
            }else if(/\s/.test(el)){
                span.innerHTML = '&nbsp;';
            }else{
                span.innerHTML = el;
            }
            content.insertBefore(span,jsBlink);
            i++;
        }else{
            clearInterval(timerId);
        }
    },200)
}

var blink = document.querySelector('#jsBlink')
var content = document.querySelector('.content')

function output(str) {
    removeNodeAll()
    var wordArr = str.split('');
    var index = 0;
    const timer = setInterval(() => {
        if (index < wordArr.length) {
            insertNode(wordArr[index])
            index++
        } else {
            window.clearInterval(timer)
        }
    }, 200)
    }

function removeNodeAll() {
    var preNode = blink.previousElementSibling
    while (preNode) {
        content.removeChild(preNode)
        preNode = blink.previousElementSibling
    }
}

function insertNode(w) {
    var word = transferStr(w)
    var node;
    if (word === '\n') {
        node = document.createElement('br')
    } else {
        node = document.createElement('span')
        node.className = `word ${genColor()}`
        node.innerText = word
    }
    content.insertBefore(node, blink)
}

function genColor() {
    return `color${Math.ceil(Math.random() * 25)}`
}

function transferStr(word) {
    switch (word) {
        case ' ':
            return '&nbsp;'
        case '>':
            return '&gt;'
        case '<':
            return '&lt;'
        default:
            return word
    }
}

需要将cont中子节点(除jsBlink)通过remove移除，并且\n需要document.createElement创建一个br元素

function output(str) {
  var cont = document.querySelector('.content')
  // 获取光标节点
  var blink = document.getElementById('jsBlink')
  // 每次都清空内容 保留光标
  while(cont.children[0] != blink) {
    cont.children[0].remove()
  }

  // 分割输入的str字符串
  var strArr = str.split('')

  // 转义字符
  strArr = strArr.map(item => {
    if (item === '<') {
      return '&lt;'
    } else if (item === '>') {
      return '&gt;'
    } else if (item === ' ') {
      return '&nbsp;'
    } else {
      return item;
    }
  })
  // 设置定时器
  var i = 0
  var timer = setInterval(() => {
    if (i == strArr.length) {
      // 清除定时器
      clearInterval(timer)
    } else {
      if (strArr[i] == '\n') {
        var br = document.createElement('br')
        cont.insertBefore(br, blink)
      } else {
        // 根据内容添加至span内 并且设置class类
        let span = document.createElement('span')
        let colorNum = 'color' + Math.floor(Math.random() * 24 + 1)
        span.classList.add('word', colorNum)
        span.innerHTML = strArr[i]
        cont.insertBefore(span, blink)
      }
      i++
    }
  }, 200)
}

function output(str) {
    var content = document.getElementsByClassName('content')[0];
    var jsBlink = document.getElementById('jsBlink');
    var length = str.length;
    var idx = 0;

    // 移除闪动节点前的节点
    while (content.children[0].id !== 'jsBlink') {
        content.removeChild(content.children[0]);
    }

    // 生成节点
    var time = function () {
        var c = str[idx];

        if (c === '\n') {
            var br = document.createElement('br');
            content.insertBefore(br, jsBlink);
        } else {
            var span = document.createElement('span');
            switch (c) {
                case ' ':
                    span.innerHTML = ' ';
                    break;
                case '<':
                    span.innerHTML = '&lt;';
                    break;
                case '>':
                    span.innerHTML = '&gt;';
                    break;
                default:
                    span.innerHTML = c;
                    break;
            }
            span.className = 'word' + ' ' + 'color' + Math.ceil(Math.random() * 23);
            content.insertBefore(span, jsBlink);
        }
        if (++idx >= length) return;
        setTimeout(time, 200);
    }
    time();
}