Javascript replace()方法失败了吗？

Question

我正试图replace()摆脱style="border-top-color: green;"一大堆代码.下面的例子显示它不起作用,我不明白为什么.

做alert(res);似乎表明完整的代码块(HTMl <p id="demo">)似乎没有被扫描replace().

function myFunction() {

  var str = document.getElementById("demo").innerHTML;
  var res = str.replace(' style="border-top-color: green;"', '');
  document.getElementById("demo").innerHTML = res;
}

<span id="demo">

    Point: (11, 2)
    <br>Slope: <span style="position: relative; top: 1px; left: -2px;">-</span>
    <div class="fraction_display"><span class="numer_display">12</span><span class="bar_display">/</span><span class="denom_display">7</span>
    </div>
    <br>
    <br>Point-Slope Form: y – 2 = <span style="position: relative; top: 1px; left: -2px;">-</span>
    <div class="fraction_display"><span class="numer_display">12</span><span class="bar_display">/</span><span class="denom_display" style="border-top-color: green;">7</span>
    </div>(x – 11)
  </span>

  <button onclick="myFunction()">Replace Fail</button>

单击"替换失败"将显示style="border-top-color: green;"在应该删除之后仍然存在.思考？

Answer 1

这将失败,因为一个<p>不能包含<div>.如果检索具有非法结构的元素的内部html,它将返回意外的字符串.所以这:

var str = document.getElementById("demo").innerHTML

将返回此,只有这样:

点:(11,2)
坡度: -

一旦浏览器点击div它就会停止返回任何超过它的内容.因此,您想要替换的字符串永远不会返回,更不用说替换了.

您应该确保您的标记对W3C的验证器有效:https://validator.w3.org/