点击按钮依次高亮PGN格式国际象棋走棋子串的实现思路咨询

• 第一步：提取走棋序列
  先把PGN字符串里的所有走棋子串按顺序提取出来，存储为一个一维数组。你不需要处理序号、注释、省略号的话，直接按走棋的特征匹配提取即可，最终得到类似["e4", "e5", "Nf3", "Nf6", "Bc4", "Bc5"]的顺序序列。
• 第二步：渲染带标识的PGN文本
  渲染PGN内容时，给每一个匹配到的走棋子串单独包裹一个标签（比如<span>），给标签添加自定义属性标记当前走棋对应的数组下标，比如<span data-step="0">e4</span>，提前写好高亮用的CSS类，初始状态所有走棋都不应用该类。
• 第三步：维护步数状态
  单独定义一个变量记录当前高亮的步数下标，初始值设为-1，表示还没有任何走棋被高亮。
• 第四步：绑定按钮点击逻辑
  给交互按钮绑定点击事件，每次点击执行以下操作：
  1. 若当前步数下标已经是走棋序列数组的最后一位，可直接终止逻辑或重置到初始状态，按你的需求决定即可
  2. 先清除上一个已高亮走棋的高亮样式
  3. 步数下标+1
  4. 找到对应data-step值匹配当前下标的标签，给它添加高亮样式

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