Question

想象一下以下场景：我有这个HTML主体（这只是一个例子，分隔符可以由第三方配置，所以无法使用像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机构要求登录和密码的一部分。如你所见，我有

＆LT; fieldset＆gt;和＆lt; / fieldset＆gt;对于这个例子，那些是我的分隔符。这意味着，这个分隔符之间的所有内容我想换另一个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>??

记住这只是一个例子，我需要把分隔符放在＆lt;体＆GT;和＆lt; /体＆GT;或类似：“点击此处开始下载”和“感谢您访问本网站”......我的意思是：可以是身体内部的任何内容，以及我想要放置HTML代码的2个分隔符之间。谢谢。

Answer 1

您可以使用document.querySelector。

例如：

document.querySelector('#login fieldset');

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

Answer 2

如果您坚持按自己的方式行事，请使用

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);

Demo

但请注意这样

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

问题是You can't parse [X]HTML with regex because Zalgo is coming，所以用文本解析它更糟糕。

如何在2个分隔符之间更改HTML？

2 个答案: