Javascript replace() method failing?

Question

I'm trying to use replace() to get rid of style="border-top-color: green;" in a chunk of code. The example below shows that it's not working, and I don't understand why.

Doing alert(res); seems to indicate that the full chunk of code (the HTMl of <p id="demo">) doesn't seem to be being scanned by 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>

Clicking "Replace Fail" will show you that the style="border-top-color: green;" is still present after it should have been removed. Thoughts?

are you sure your javascript is correctly hooked up with the html? so do something like alert('test'); inside the click to make sure it is even registered. — Andrei, Jun 24 '16 at 16:48
If you have an issue with string manipulation, don't include (irrelevant) HTML in your question. Put the string in a variable, try to manipulate that, and if you can't - ask a question — Amit, Jun 24 '16 at 16:48
Your HTML is invalid. A `
` cannot contain a `
`. Browsers know this and tend to try and compensate by closing the `
`, thereby changing the structure you intended to use. — j08691, Jun 24 '16 at 16:49
I was actually just using the
tag as a test, but apparently that was causing the issue. I'll look deeper on my end. — gtilflm, Jun 24 '16 at 16:54
Now you edited your code *again* and this time wrapped your divs in spans, which is invalid just like when you wrapped them with paragraphs. You should really learn basic debugging techniques like running HTML through a validator and console logging your JavaScript. — j08691, Jun 24 '16 at 16:56
@j08691: Interestingly, it still works with wrapping a around. So, it works with and
as wrappers, but not
. Interesting....... — gtilflm, Jun 24 '16 at 16:58
Regardless of whether it works when using span wrappers it's invalid code and shouldn't be used. — j08691, Jun 24 '16 at 16:59
Agreed, but I was just doing this for testing purposes and it seems odd that it would work with one version of invalid code and not with another. Could it be related to the line breaks in the code chunk being scanned for replacement? — gtilflm, Jun 24 '16 at 17:00

Mister Epic · Accepted Answer · 2016-06-24T19:20:44.113

This will fail because a <p> cannot contain a <div>. If you retrieve the inner html of an element with an illegal structure, it will return an unexpected string. So this:

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

will return this and only this:

Point: (11, 2)
Slope: -

As soon as the browser hits the div it will stop returning anything past it. Therefore the string you want to replace is never returned, much less replaced.

You should ensure your markup is valid with W3C's validator: https://validator.w3.org/

Javascript replace() method failing?

1 Answers1

Linked