当 HTML 可能有子元素时，如何使用 Javascript 用新文本替换 HTML 文本

Question

我正在尝试使用 JavaScript 搜索所有 p 元素以查找正则表达式，但我要查找的文本可能部分存在或不存在于属性元素中或包含在跨度中。最终，我计划通过添加一个引用我之前用 JavaScript 插入的 html id 的属性元素来修复在 Word 中应用于 Word 项目符号项的 HTML 代码中的交叉引用。

我的总体项目是创建一个 Word 文档，我使用“另存为”功能让 Word 创建一个过滤的 HTML 文件。我最终使用 JavaScript 来插入 id 和标签，以便我可以利用 CSS 文件来标准化我所有 HTML 文件的格式。因此，我对初始 HTML 代码的控制有限。

到目前为止，我已经能够创建一个遍历所有 p 元素的循环。在循环中，我可以为“/Step (\d+)/”的 innerText 上的正则表达式执行条件语句，因为我希望文本看起来像第 1 步、第 12 步或任何其他数字。下面的代码似乎成功输入了 if 语句。我在使用 innerHTML 部分的替换函数时遇到了问题，因为 innerText 与表达式匹配，但 innerHTML 包含阻止我正在寻找的最终结果的元素。我希望能够概括地解释任何其他元素，例如粗体、斜体、a 等。为此，我尝试使用多个 if 语句来替换各种潜在的 HTML 条件。

我试图通过对文本应用粗体来确定这项技能，以确保我了解如何完成此特定功能。到目前为止，我所做的所有搜索都有助于使正则表达式与 innerText 匹配，但我找不到方法或忽略无关的 html 代码。我在想可能可以用新的 HTML 代码存储替换的 innerText，然后将其设为新的 innerHTML，但是我想要维护的 p 元素中可能还有其他格式。

通过我使用第二个正则表达式进行 innerHTML 替换的方法，贪婪搜索似乎我会捕获错误结果，即使正则表达式正在捕获它。

HTML

<p id="FirstPara" class=firstpara>This is a header</p>
<p class=firstpara>This is a reference to Step <span lang=HE>&#8206; </span><b>1</b>.</p>
<p class=firstpara>This is a reference to Step <span lang=HE>&#8206;</span>2.</p>
<p class=firstpara>This is a reference to Step <span lang=HE>&#8206;</span>1 and Step <span lang=HE>&#8206;</span>2.</p>

JavaScript 函数

function findTheText() {
    regExp1 = /Step (\d)/g;
    for (var i = 0; i < document.getElementsByTagName('p').length; i++) {
                alert(i+" - "+j+" - "+document.getElementsByTagName('p')[i].innerHTML+" - "+results[j]);
        var results = document.getElementsByTagName('p')[i].innerText.match(regExp1);
        if (results !== null) {
            for (var j = 0; j < results.length; j++) {
                var replace = results[j].replace(/Step\s/,"");
                var regExp2 = new RegExp('Step\s'+replace,"i");
                var regExp3 = new RegExp('Step\s.*>'+replace,"i");
                var regExp4 = new RegExp('Step\s.*>.*>'+replace,"i");
                var results2 = document.getElementsByTagName('p')[i].innerText.match(regExp2);
                var results3 = document.getElementsByTagName('p')[i].innerText.match(regExp3);
                var results4 = document.getElementsByTagName('p')[i].innerText.match(regExp4);
                    if (results2 !== null) {
                        document.getElementsByTagName('p')[i].innerHTML.replace(regExp2, "<b>"+results[j]+"</b>");
                    } else if (results3 !== null) {
                        document.getElementsByTagName('p')[i].innerHTML.replace(regExp3, "<b>"+results[j]+"</b>");
                    } else if (results4 !== null) {
                        document.getElementsByTagName('p')[i].innerHTML.replace(regExp4, "<b>"+results[j]+"</b>");
                    }
            }
        }
    }

}

到目前为止，代码将找到我想要的文本，但由于正则表达式匹配我正在寻找的字符串，但 innerHTML 没有我没有在文本上实现粗体（或最终属性）。

预期的 HTML 输出

<p class=firstpara>This is a reference to <b>Step 1</b>.</p>
<p class=firstpara>This is a reference to <b>Step 2</b>.</p>
<p class=firstpara>This is a reference to <b>Step 1</b> and <b>Step 2</b>.</p>

Answer 1

您可以删除所有子 spans，然后检查 textContent 以忽略其余标记（如 <b>s），捕获步数并替换为 <b> 和 @987654325 包围的数字@：

document.querySelectorAll('p').forEach((p) => {
  p.querySelectorAll('span').forEach(span => span.remove());
  p.innerHTML = p.textContent.replace(/Step +(\d+)/g, '<b>Step $1</b>');
});

<p id="FirstPara" class=firstpara>This is a header</p>
<p class=firstpara>This is a reference to Step <span lang=HE>&#8206; </span><b>1</b>.</p>
<p class=firstpara>This is a reference to Step <span lang=HE>&#8206;</span>2.</p>
<p class=firstpara>This is a reference to Step <span lang=HE>&#8206;</span>1 and Step <span lang=HE>&#8206;</span>2.</p>

仅删除带有lang 或HE 的spans：

document.querySelectorAll('p').forEach((p) => {
  p.querySelectorAll('span[lang="HE"]').forEach(span => span.remove());
  p.innerHTML = p.textContent.replace(/Step +(\d+)/g, '<b>Step $1</b>');
});

<p class=firstpara>This is a <span>reference</span> to Step <span lang=HE>‎ </span><b>1</b>.</p>

Answer 2

我不确定这是否是您期望的结果，但此代码可能有效。您甚至可以更新它以使用箭头函数和模板文字。

function findTheText() {
  let regExp1 = /Step (\d)/g;
  let paragraphs = document.getElementsByTagName('p');

  for (var i = 0; i < paragraphs.length; i++) {
    let spans = Array.from(paragraphs[i].getElementsByTagName('span'));
    spans.forEach(function(child) {
      paragraphs[i].removeChild(child);
    })

    if (paragraphs[i].innerHTML.match(regExp1)) {
      let replace = paragraphs[i].innerHTML.match(regExp1);
      replace.forEach(function(match) {
        paragraphs[i].innerHTML = paragraphs[i].innerHTML.replace(match, "<b>" + match + "</b>");
      })
    };
  }
}

findTheText()

<p id="FirstPara" class=firstpara>This is a header</p>
<p class=firstpara>This is a reference to Step <span lang=HE>&#8206; </span>1.</p>
<p class=firstpara>This is a reference to Step <span lang=HE>&#8206;</span>2.</p>
<p class=firstpara>This is a reference to Step <span lang=HE>&#8206;</span>1 and Step <span lang=HE>&#8206;</span>2.</p>