Javascript：文档 innerHTML 替换中断表单

Posted 2023-05-07

【中文标题】Javascript：文档 innerHTML 替换中断表单

【英文标题】：Javascript: document innerHTML replace breaks forms

【发布时间】：2013-01-10 19:55:33

【问题描述】：

我目前正在尝试替换还包含表单的页面中的一段纯文本。我知道在替换包含表单的代码后，表单元素会被重新创建。这可能会破坏表单（在我正在操作的网页上确实如此）。

通常，我通过使用“getElementsByTagName”函数来解决这个问题，以确保我不需要替换包含表单的代码，并且到目前为止这一直是可能的。然而此时，我到达了一个页面，其中最小的标记名是一个 div，其中包含我需要替换 和 一个表单的文本。这个 div 在表格中进一步细分，所以最初我想“让我们按表格获取元素”，但我需要替换的正是不在表格中细分。

所以我用这段代码来替换：

document.documentElement.innerhtml = document.documentElement.innerHTML.replace(RegEx, replaceString);

当然，这会破坏页面上的表单，这是不想要的行为。

有没有人知道如何在不破坏表格的情况下解决这个问题？是否有可能以某种方式获得对不包含表格的 div 部分的引用？是否可以仅更改部分代码？现在我获取代码的一个实例，替换实例中的匹配项，然后用更改的实例覆盖原始代码。我曾经记得在另一个页面上尝试过document.documentElement.innerHTML.replace(RegEx, replaceString);，但这只返回了一个更改代码的实例，它并没有更改原始代码。

这是页面的一部分：

<div class="BoxContent" style="background-image:url(http://static.tibia.com/images/global/content/scroll.gif);">
<TABLE></TABLE>
<BR>
Some text here.
<BR>
And some more.
<table></table>
<table></table>
</div>

我需要对表格之间的文本进行一些更改。

我在 SO 上环顾四周，发现了关于使用 innerHTML 向表单添加内容的类似问题，但这对我的事业没有帮助。所以，在这里感谢所有帮助！

肯尼斯

【问题讨论】：

请告诉我们您要完成的工作，而不是要求我们修复错误代码。也许您的实际目标可以在不使用 RegEx 替换 HTML 的情况下实现，这是一个坏主意

我的问题的第一句话：“我目前正在尝试替换还包含表单的页面中的一段代码。”本质上，我需要在页面中搜索特定模式，如果我得到匹配，我需要用其他东西替换部分匹配。考虑一段包含单词“foo”的文本，我需要将其替换为“bar”一次。除了搜索整个页面之外，没有其他方法可以搜索document，因为文本没有被任何类型的标签包裹，但替换也可以通过字符串方式完成，不一定是 DOM 方式。跨度>

这不是我问的。我读了你的文字，看到了你的尝试。但是为什么你需要使用脚本替换一些代码呢？为什么不使用 jQuery 或 DOM 操作，例如 document.getElementsByTagName('form')

可能有误会。我实际上是在尝试替换 字符串，而不是 HTML 代码。我想在此页面包含的文本中链接一个单词以链接到另一个页面（出于个人方便访问的目的）。我和我的一个朋友尝试了一种 JQuery 方法，但问题仍然存在。唯一可以获取这段文本的标记名是一个带有“BoxContent”类的 ，但是这个 div 仍然包含在我进行替换时会损坏的表单。没有办法进一步缩小范围。一切都在这个 div 的表格中，除了这段文字。

我已将来源的相关部分添加到原始问题中。此示例中的文本是否会在其中一个子节点中返回？

【参考方案1】：

这里 - 纯 JS

DEMO

window.onload=function() 
  var nodes = document.getElementsByClassName("BoxContent")[0].childNodes;
    for (var i=0,n=nodes.length;i<n;i++) 
        if (nodes[i].nodeType==3) 
            // console.log(nodes[i].textContent)
            nodes[i].textContent=nodes[i].textContent.replace(/some/gi,"Lots");
        
    

【讨论】：

作品太完美了。 :) 谢谢！