javascript - 尽管/g，.replace() 不会替换每个实例

Question

所以，我的 javascript 代码有两个问题。我会尽力使其尽可能短，并且仅复制问题所需的部分。

我有这个 html 代码(每个 li 看起来都不一样不是我的错):

    <li>
        <span style="font-family:arial, helvetica, sans-serif;">Siehe <a href="Link 1" rel="">Text 1</a>.</span>
    </li>
    <li>
        <span style="font-family:arial, helvetica, sans-serif;">Siehe</span> <a href="Link 1" rel="">Text 2</a>.<span style="font-family:arial, helvetica, sans-serif;"> </span>
    </li>
    <li>
        Siehe <a href="Link 1" rel="">Text 3</a>.
    </li>

这里是解决我的问题所需的 javascript 代码。首先，我删除每个 span 元素。之后我想替换“a href”部分并增加新字符串的数量。

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

var ersetzen = neu
.replace(/<span.*?>(.*?)<\/span>/g, "$1") // Gets rid of every span
.replace(/\s<li>\n\s\sSiehe\s*<a href=".*?" rel="">(.*?)<\/a>\.\n\s<\/li>/g, "\t<li>\n\t\tSiehe <a class=\"trophiesAnkerLink\" href=\"#dlc" + getNextDlcNumber() + "\" rel=\"\">$1</a>.\n\t</li>")); // Replaces a href with increasing dlc numbers

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

这有两个问题:

1. 第一个和第三个“a href”已成功替换。但第二个不是，我不明白为什么。我认为这与“Siehe”和“a”标签开头之间的跨度标签有关，但是由于第一次替换，跨度应该被删除，所以我不确定这是否是导致问题的原因。我尝试使用“Siehe\s*或其中包含“</span> ”，但这些都不起作用。

2. “#dlc”之后的数字没有增加，即使是第三个也只是停留在“#dlc1”。我需要以不同的方式做到这一点吗？

这是使用js后的输出:

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

我希望我发布了所有必要的信息。如果没有，我可以提供更多。提前感谢您的帮助:)

Answer 1

实际上，手动解析和编辑 DOM 元素内容是一个非常糟糕的主意，您不必让生活变得复杂并重新发明轮子。

您可以使用JS内置方法直接访问链接元素的.href属性并直接更改它，甚至无需使用.replace() 方法。

这就是您的代码:

let elements = Array.from(document.getElementById("ausgabe").querySelectorAll("a"))
elements.forEach(a => a.href = "#dlc" + getNextDlcNumber());

您可以看到它可以只是一个单行代码，即可完成您想要实现的所有目标。

演示:

var nummer = 0;

function getNextDlcNumber() {
  return ++nummer;
}

Array.from(document.getElementById("ausgabe").querySelectorAll("a")).forEach(a => a.href = "#dlc" + getNextDlcNumber());

<div id="ausgabe">
  <li>
    <span style="font-family:arial, helvetica, sans-serif;">Siehe <a href="Link 1" rel="">Text 1</a>.</span>
  </li>
  <li>
    <span style="font-family:arial, helvetica, sans-serif;">Siehe</span> <a href="Link 1" rel="">Text 2</a>.<span style="font-family:arial, helvetica, sans-serif;"> </span>
  </li>
  <li>
    Siehe <a href="Link 1" rel="">Text 3</a>.
  </li>

</div>

您可以通过将鼠标悬停在链接上来检查它们的新值，等等。