0

想象一下以下场景：我有这个 HTML 正文（这只是一个示例，分隔符将由第 3 方配置，因此无法使用 getElementBy 之类的 DOM 方法...）：

<div id="login">
<form method="post" action="https://site.com/login.html?skin=webmail" id="fWM">
<fieldset>
    <p><label>Login<br><input type="text" class="inpText" name="user" id="user"/> </label><span class="provider">@isp.com</span></p>
    <p><label>Password<br><input type="password" class="inpText inpPass" name="pass" id="pass"/></label></p>
</fieldset>
<p id="forgot">
<a href="https://site.com/somelink.html">Forgot password?</a> <span class="pipe">|</span>
<a href="http://site.com/somelink.jhtm">Help</a>
</p>
<br><a><input type="submit" value="" id="bOK"/></a></p>
</form>

好的，这只是一些要求登录名和密码的 html 正文的一部分。如你所见，我有

< fieldset > 和 < /fieldset > 对于这个例子，这些是我的分隔符。这意味着，我想为另一个 html 代码更改此分隔符之间的所有内容。我有一些像这样的“代码开头”，你对我在说什么有一些想法：

var myBody = document.body.innerHTML;
var beginInject = myBody.indexOf("<fieldset>");
var endInject = myBody.indexOf("</fieldset>");
var InjectBody = 'Hello World!';
//what to do now to put Hello World! between the <fieldset> and </fieldset>??

请记住，这只是一个示例，我可能需要放置 <body> 和 </body> 之类的分隔符或类似：“单击此处开始下载”和“感谢您访问此网站”......我的意思是: 可以是正文中的任何内容，也可以是我要放置 HTML 代码的 2 个分隔符之间的任何内容。谢谢你。

4

2 回答 2

0

你可以使用document.querySelector.

例如：

document.querySelector('#login fieldset');

它的参数可以是你想要的选择器。这样您就不必担心是否按 id、按类、按标记名、按名称等进行匹配。

于 2013-10-16T00:47:42.740 回答
0

如果您坚持按照自己的方式进行操作，请使用

var beginText = "<p>",
    endText = "</p>",
    injectText = 'Hello World!';

var html = document.body.innerHTML,
    beginPos = html.indexOf(beginText),
    endPos = html.indexOf(endText);

document.body.innerHTML =
    html.substring(0, beginPos + beginText.length)
    +injectText
    +html.substring(endPos + endText.length);

演示

但请注意，这种方式

  • 您将删除您体内的所有事件侦听器
  • 您将失去所有元素的属性（不是属性）
  • 浏览器将重新加载所有正文（慢）
  • 而且它不适用于所有情况。例如：
    • 如果你搜索<p>，你不会匹配<p class="myClass">
    • 如果你搜索<p a="b" c="d">，你不会匹配<p c="d" a="b">
    • 可以匹配文本而不是真实元素，例如，如果文本出现在文本区域中。
    • endPos可能小于beginPos，例如因为它出现在文本区域中。

问题是你不能用正则表达式解析 [X]HTML 因为 Zalgo 即将到来，所以只用文本来解析它就更糟了。

于 2013-10-16T01:16:56.613 回答