JavaScript replace全局替换失效及序号不递增问题求助

问题1：第二个<li>中的链接未被替换 #

原正则依赖固定的空白结构（比如<li>前的空格、换行后的两个空格），但移除<span>后第二个<li>的空白布局和正则预期不符（比如Siehe和<a>之间的空格、链接后的空格），导致匹配失败。

解决方法：将正则中的固定空白替换为\s*（匹配任意数量的空白字符，包括空格、换行、制表符），同时简化匹配逻辑，不依赖固定缩进：

// 修改后的匹配正则
/\s*<li>\s*Siehe\s*<a href=".*?" rel="">(.*?)<\/a>\.\s*<\/li>/g

问题2：#dlc后的序号未递增 #

当replace的第二个参数是字符串时，getNextDlcNumber()会在字符串拼接阶段仅执行一次，所有替换都使用同一个初始递增后的值。

解决方法：将replace的第二个参数改为函数，每次匹配时调用函数获取最新的递增序号：

// 用函数作为replace的第二个参数
function(match, text) {
  return `\t<li>\n\t\tSiehe <a class="trophiesAnkerLink" href="#dlc${getNextDlcNumber()}" rel="">${text}</a>.\n\t</li>`;
}

完整修改后的代码 #

var neu = document.getElementById("ausgabe").value;             
var nummer = 0;
function getNextDlcNumber() {
    return ++nummer;
}

var ersetzen = neu
  .replace(/<span.*?>(.*?)<\/span>/g, "$1") // 移除所有span标签
  .replace(/\s*<li>\s*Siehe\s*<a href=".*?" rel="">(.*?)<\/a>\.\s*<\/li>/g, function(match, text) {
    return `\t<li>\n\t\tSiehe <a class="trophiesAnkerLink" href="#dlc${getNextDlcNumber()}" rel="">${text}</a>.\n\t</li>`;
  });

document.getElementById("ausgabe").value = ersetzen;

执行后预期输出 #

<li>
        Siehe <a class="trophiesAnkerLink" href="#dlc1" rel="">Text 1</a>.
    </li>
    <li>
        Siehe <a class="trophiesAnkerLink" href="#dlc2" rel="">Text 2</a>. 
    </li>
    <li>
        Siehe <a class="trophiesAnkerLink" href="#dlc3" rel="">Text 3</a>.
    </li>

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