Question

我试图在一大块代码中使用replace()来摆脱style="border-top-color: green;"。下面的例子表明它不起作用，我不明白为什么。

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

＆＃13;

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

＆＃13;

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

＆＃13;

点击＆＃34;替换失败＆＃34;会告诉您style="border-top-color: green;"在应该删除之后仍然存在。想法？

Answer 1

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

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

将返回此内容并且仅返回：

点：（11,2）斜坡： -

只要浏览器点击div，它就会停止返回任何内容。因此，您想要替换的字符串永远不会返回，更不用说了。

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

Javascript replace（）方法失败了吗？

1 个答案: