如何实现点击按钮按序导航并选中指定匹配单词？正则问题

问题分析 #

你之前使用的正则表达式^(?:\w+ ){2}\K\w+无法满足需求，原因是它仅能匹配文本开头第3个空格分隔的单词，但你的目标是分散在文本中带下划线的特定单词，这类单词并非按固定空格顺序排列，正则无法精准定位到第N个目标元素。

实现思路 #

直接通过DOM操作收集所有目标单词元素，维护索引变量控制选中状态，实现按序导航与直接跳转：

• 先获取页面中所有带下划线的目标单词元素集合
• 用索引变量记录当前选中的位置
• 通过按钮事件更新索引，切换选中状态并处理边界循环
• 直接跳转时，设置对应索引即可定位到目标单词

示例代码 #

HTML结构（假设目标单词用.target-word类标记）

<p>
  这是第一个<span class="target-word">单词</span>，这是第二个<span class="target-word">目标</span>，这是第三个<span class="target-word">词汇</span>，这是第四个<span class="target-word">内容</span>，这是第五个<span class="target-word">文本</span>
</p>
<button id="prevBtn">上一个</button>
<button id="nextBtn">下一个</button>
<button id="jumpToThird">跳转到第三个</button>

JavaScript逻辑

// 收集所有带下划线的目标单词元素
const targetWords = document.querySelectorAll('.target-word');
let currentIndex = -1;

// 选中指定索引单词的通用函数
function selectWord(index) {
  // 移除上一个选中元素的样式
  if (currentIndex !== -1) {
    targetWords[currentIndex].classList.remove('selected');
  }
  // 处理索引边界，实现循环导航
  if (index < 0) {
    currentIndex = targetWords.length - 1;
  } else if (index >= targetWords.length) {
    currentIndex = 0;
  } else {
    currentIndex = index;
  }
  // 给当前单词添加选中样式并滚动到视图
  const activeWord = targetWords[currentIndex];
  activeWord.classList.add('selected');
  activeWord.scrollIntoView({ behavior: 'smooth', block: 'center' });
}

// 绑定按钮事件
document.getElementById('nextBtn').addEventListener('click', () => {
  selectWord(currentIndex + 1);
});

document.getElementById('prevBtn').addEventListener('click', () => {
  selectWord(currentIndex - 1);
});

// 直接跳转到第三个单词（索引为2，从0开始计数）
document.getElementById('jumpToThird').addEventListener('click', () => {
  selectWord(2);
});

配套CSS样式

.target-word {
  text-decoration: underline;
}
.selected {
  background-color: #ffeb3b;
  border-radius: 3px;
}

优势说明 #

这种方式无需依赖正则，直接基于DOM元素集合操作，不管目标单词在文本中的位置如何，都能精准实现按序导航与指定跳转，逻辑清晰且兼容性更好。

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