Trouble using string.replace() Javascript with Unicode Symbols

Question

I'm writing a javascript function to move a pointing arrow from one html element to another. "&#9664" displays an arrow in HTML.

The trouble is that while I can add an arrow to innerHTML I can't seem to remove the arrow from the current selection.

Here is the relevent portion of my code:

var current;
function changeArrowFunction(line) {
if (typeof current != 'undefined')
    current.innerHTML = current.innerHTML.replace(" &#9664","");
line.innerHTML = line.innerHTML + " &#9664";
current = line;
}

I tried changing around the typeof condition or removing it completely with no sign of improvement, so it seems the problem is with replace().

Is that space supposed to be there " &#9664"? Also it doesn't seem like you are correct defining your function, you need the function keyword before hand. Finally it looks like you are just placing it back in anyways. — Spencer Wieczorek
– Spencer Wieczorek, Commented Nov 18, 2015 at 4:40
function thing was a typo (fixed), the space is supposed to be there, or else I would add a space every time the arrow moved. I want there to be no trace of the arrow. — Ester Lin
– Ester Lin, Commented Nov 18, 2015 at 4:42
i would wrap a tag around it, like <i>&#9664</i> so you can remove() the i, which is a lot less janky than replacing innerHTML... — dandavis
– dandavis, Commented Nov 18, 2015 at 4:47
The problem with that is I end up with a bunch of <i> tags all over, and since this is looping through hundreds of times touching each line multiple times after a while I think it would break somehow. — Ester Lin
– Ester Lin, Commented Nov 18, 2015 at 4:53

Arun P Johny · Accepted Answer · 2015-11-18 04:51:21Z

3

The problem is inner html does not preserve the html codes so.

If you log/alert the value of innerHTML you could see that the character ◀ is visible there not the string &#9664, so the replace function won't be able to find the character sequence to replace it.

var current;

function changeArrayFunction(line) {
  if (typeof current != 'undefined') {
    current.innerHTML = current.innerHTML.replace(" ◀", "");
  }
  line.innerHTML = line.innerHTML + " &#9664";
  current = line;
}

var c = 0;

function test() {
  changeArrayFunction(document.getElementById('d-' + (++c)))
}

<div id="d-1">adf</div>
<div id="d-2">adf</div>
<div id="d-3">adf</div>
<div id="d-4">adf</div>
<button onclick="test();">Test</button>

edited Nov 18, 2015 at 4:51

answered Nov 18, 2015 at 4:44

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ester Lin Over a year ago

I'm sorry, could you please clarify what the problem is and how you're solving it?

Ester Lin Over a year ago

Please identify what you changed, it looks the same as my code besides the brackets around the if statement, which I added and doesn't seem to change anything

Arun P Johny Over a year ago

@e.sterling current.innerHTML.replace(" ◀", ""); ?

Collectives™ on Stack Overflow

Trouble using string.replace() Javascript with Unicode Symbols

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related