使用jQuery实现列表单词定时随机高亮放大的技术疑问

第一步：修复HTML与初始JS的问题 #

你当前代码存在几个明显错误，先逐一修正：

1. HTML标签闭合错误：原代码里div的闭合标签写成了</a>，应该改为</div>：

<div id="highlight-list">XXX - YYY - ZZZ</div>

2. 正则表达式语法错误：JS里正则需要用斜杠/包裹，你写的// *- *//是无效的，正确匹配-（前后可能带空格）的正则是/\s*-\s*/。

3. 数组遍历与空值处理问题：for(var word in eachItem)会遍历数组的所有可枚举属性（包括原型链上的），用forEach更安全；另外split后可能出现空字符串，需要过滤掉。

修正后的初始包裹span的JS代码：

var fullList = document.querySelector("#highlight-list");
var regex = /\s*-\s*/;
var eachItem = fullList.innerHTML.split(regex).filter(item => item.trim() !== ''); // 过滤空内容
fullList.innerHTML = "";
eachItem.forEach((item, index) => {
  var span = document.createElement('span');
  span.textContent = item;
  fullList.appendChild(span);
  // 保留原分隔符
  if (index !== eachItem.length - 1) {
    fullList.appendChild(document.createTextNode(' - '));
  }
});

第二步：实现随机定时高亮功能 #

接下来添加CSS高亮样式和定时切换逻辑：

1. 定义CSS高亮类：

.highlight {
  font-size: 1.5em;
  font-weight: bold;
  color: #ff4500;
}
#highlight-list span {
  margin: 0 5px;
}

2. 编写定时切换高亮的JS代码：

function highlightRandomItem() {
  var spans = document.querySelectorAll("#highlight-list span");
  // 移除所有已有高亮
  spans.forEach(span => span.classList.remove('highlight'));
  // 随机选中一个添加高亮
  if (spans.length > 0) {
    var randomIndex = Math.floor(Math.random() * spans.length);
    spans[randomIndex].classList.add('highlight');
  }
}

// 初始高亮一次，之后每隔3秒切换
highlightRandomItem();
setInterval(highlightRandomItem, 3000);

完整代码示例 #

整合所有代码的完整实现：

<!DOCTYPE html>
<html>
<head>
  <style>
    .highlight {
      font-size: 1.5em;
      font-weight: bold;
      color: #ff4500;
    }
    #highlight-list span {
      margin: 0 5px;
    }
  </style>
</head>
<body>
  <div id="highlight-list">XXX - YYY - ZZZ</div>

  <script>
    // 拆分单词并包裹span
    var fullList = document.querySelector("#highlight-list");
    var regex = /\s*-\s*/;
    var eachItem = fullList.innerHTML.split(regex).filter(item => item.trim() !== '');
    fullList.innerHTML = "";
    eachItem.forEach((item, index) => {
      var span = document.createElement('span');
      span.textContent = item;
      fullList.appendChild(span);
      if (index !== eachItem.length - 1) {
        fullList.appendChild(document.createTextNode(' - '));
      }
    });

    // 定时随机高亮
    function highlightRandomItem() {
      var spans = document.querySelectorAll("#highlight-list span");
      spans.forEach(span => span.classList.remove('highlight'));
      if (spans.length > 0) {
        var randomIndex = Math.floor(Math.random() * spans.length);
        spans[randomIndex].classList.add('highlight');
      }
    }

    highlightRandomItem();
    setInterval(highlightRandomItem, 3000);
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者user3204476