求助：如何使用Typed.js实现文本高亮？基础版高亮失效

嘿，我来帮你搞定这个文本高亮的难题！

首先得明确：Typed.js基础版本本身并没有内置文本高亮的功能，你现在的代码只是把打字容器#typed放在了highlight类的span里，但Typed.js在打字过程中只是单纯替换#typed的文本内容，没有触发高亮的逻辑，所以看起来没效果。

下面给你两种实用的解决方案，根据你的需求选：

方案1：整段字符串输入完成后高亮 #

适合想要每个完整短语显示时高亮，退格时取消的场景。

1. 先添加基础的CSS样式（给高亮效果定义视觉样式）：

/* 基础容器样式，默认不高亮 */
.highlight {
  transition: background-color 0.3s ease;
  border-radius: 3px;
}
/* 激活高亮时的样式 */
.highlight.active {
  background-color: #ffd700; /* 可以换成你喜欢的颜色 */
  padding: 0 4px;
}

2. 修改你的Typed.js初始化代码，添加回调函数来控制高亮的开关：

new Typed('#typed', {
  strings: ['IT Support', 'Security Infrastructure', 'Managed IT Support', 'Web Development & Design'],
  typeSpeed: 150,
  delaySpeed: 190,
  loop: true,
  // 当整段字符串输入完成时，激活高亮
  onStringTyped: function(pos, self) {
    self.el.parentElement.classList.add('active');
  },
  // 开始退格删除时，取消高亮
  onBackspace: function(pos, self) {
    self.el.parentElement.classList.remove('active');
  }
});

方案2：打字过程中逐个字符高亮 #

适合想要每个字符在打出时就显示高亮的场景。

1. 添加字符高亮的CSS：

.char-highlight {
  background-color: #ffd700;
  padding: 0 2px;
  border-radius: 2px;
}

2. 修改Typed.js代码，利用onCharTyped回调实时给已输入的字符添加高亮：

new Typed('#typed', {
  strings: ['IT Support', 'Security Infrastructure', 'Managed IT Support', 'Web Development & Design'],
  typeSpeed: 150,
  delaySpeed: 190,
  loop: true,
  // 每输入一个字符，就给当前已输入的文本包裹高亮span
  onCharTyped: function(pos, self) {
    const currentText = self.el.textContent;
    self.el.innerHTML = `<span class="char-highlight">${currentText}</span>`;
  },
  // 退格时保持高亮状态
  onBackspace: function(pos, self) {
    const currentText = self.el.textContent;
    self.el.innerHTML = `<span class="char-highlight">${currentText}</span>`;
  }
});

另外提个小细节：你代码里的Security Infastructure拼写有误，应该是Security Infrastructure，虽然不影响功能，但修正后更专业~

内容的提问来源于stack exchange，提问作者Greenpoint It Support