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

Question

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

我的整个项目是创建一个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

您可以删除所有子项 span s，然后检查 textContent忽略其余标记(如 <b> s)，捕获步数并替换为 <b> 包围的数字和</b> :

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>

仅删除 span s 带有 lang的HE :

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>&#8206; </span><b>1</b>.</p>