String splitting incorrectly in JavaScript

Question

I am trying to split a string based on the delimter \$. I have tried this unsuccessfully.

The code that I have is at https://js.do/sun21170/77657, which is also pasted below.

Question: What am I doing wrong in this example when splitting by \$?

var trickyString = "sd sewq wee r r ttttt $300 rrtrt utu iwiwi \$500 kjgf ihj \$215 ghi"; 

//document.getElementById("div0").innerHTML = trickyString;

function splitString() {
    //Why is splitting by \$ not giving 3 elements but is instead giving 4 elements?
    var array1 = trickyString.split(/\$/);
    document.getElementById("div1").innerHTML = "<b>Length = " + array1.length + "</b>";
    for (var i = 0; i < array1.length; i++) {
        document.getElementById("div1").innerHTML += "<br>" + array1[i];
    }

    var array2 = trickyString.split("$");
    document.getElementById("div2").innerHTML = "<b>Length = " + array2.length + "</b>";
    for (var j = 0; j < array1.length; j++) {
        document.getElementById("div2").innerHTML += "<br>" + array2[j];
    }
}

<button onclick="splitString();return false;">Split a tricky string</button>

<h4>Tricky string</h4>
<div id="div0" style="color:green">sd sewq wee r r ttttt $300 rrtrt utu iwiwi \$500 kjgf ihj \$215 ghi</div>

<h4>Split using \$ as delimiter</h4>
<div id="div1" style="color:red"></div>

<h4>Split using $ as delimiter</h4>
<div id="div2"  style="color:blue"></div>

It seems to work - you get four items. What is your expected result? — VLAZ
– VLAZ, Commented Oct 18, 2018 at 12:55
I have 2 \$ strings in the main string, so shouldn't splitting based on \$ result in 3 elements? — Sunil
– Sunil, Commented Oct 18, 2018 at 12:57
Possible duplicate of Reference - What does this regex mean? — Heretic Monkey
– Heretic Monkey, Commented Oct 18, 2018 at 12:59

Psytronic · Accepted Answer · 2018-10-18 13:05:38Z

5

Your issue is stemming from the fact that within your regex /\$/, the \$ is being interpreted as requesting the $ to be treated as a literal character.

The regex you should be using is /\\\$/. As seen on regex101.com

\\ matches the character \ literally (case sensitive)
\$ matches the character $ literally (case sensitive)

You are also suffering a similar issue within your string, where you are putting \$, it's being treated as a request to literally use the character $. This can be seen if you do a console.log(trickyString);, you'll notice the \ are not in the output. You'll need to double escape the quote marks:

const trickyString = "sd sewq wee r r ttttt $300 rrtrt utu iwiwi \\$500 kjgf ihj \\$215 ghi;"

edited Oct 18, 2018 at 13:05

answered Oct 18, 2018 at 12:58

Psytronic

6,1135 gold badges40 silver badges56 bronze badges

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

5 Comments

Sunil Over a year ago

I tried your suggestion, but still I get 1 element instead of 3.

VLAZ Over a year ago

Your input data is wrong. The string "\$" is actually resolved as "$" since it's interpreted as an escaped dollar sign.

Sunil Over a year ago

@Psytronic, so just 1 backslash before $ is treated as an escape character even though escaping a $ is not required. That makes sense. After changing trickyString to include \\$ in place of '\$` it works. Thanks.

Psytronic Over a year ago

Correct, JS will always treat a backslash as a request to escape a character. Though escaping the $ is not required in your string, it is required within the regex, as the $ has special meaning for the regex (end of the string, or alternatively the end of a line if your regex has the m flag set)

Sunil Over a year ago

Your last comment was awesome since I was missing the point that $ has a special meaning in regex expression. Its very clear now. Thanks.

Haroldo_OK · Accepted Answer · 2018-10-18 13:05:59Z

3

The problem is that slashes have special meaning both in a JS String and in a RegEx.

There are two critical parts here:

var trickyString = "sd sewq wee r r ttttt $300 rrtrt utu iwiwi \$500 kjgf ihj \$215 ghi";

Should be:

var trickyString = "sd sewq wee r r ttttt $300 rrtrt utu iwiwi \\$500 kjgf ihj \\$215 ghi";

Because \$ will be interpreted as an $.

And also:

var array1 = trickyString.split(/\$/);

Should be:

var array1 = trickyString.split(/\\\$/g);

Both because \$ will be interpreted as $, therefore the first \\, and $ has, itself, an special meaning, therefore the second \$.

This is the code I have used:

var trickyString = "sd sewq wee r r ttttt $300 rrtrt utu iwiwi \\$500 kjgf ihj \\$215 ghi"; 

//document.getElementById("div0").innerHTML = trickyString;

function splitString() {
    //Why is splitting by \$ not giving 3 elements but is instead giving 4 elements?
    var array1 = trickyString.split(/\\\$/g);
    document.getElementById("div1").innerHTML = "<b>Length = " + array1.length + "</b>";
    for (var i = 0; i < array1.length; i++) {
        document.getElementById("div1").innerHTML += "<br>" + array1[i];
    }

    var array2 = trickyString.split("$");
    document.getElementById("div2").innerHTML = "<b>Length = " + array2.length + "</b>";
    for (var j = 0; j < array1.length; j++) {
        document.getElementById("div2").innerHTML += "<br>" + array2[j];
    }
}

And these are the results:

Tricky string
sd sewq wee r r ttttt $300 rrtrt utu iwiwi \$500 kjgf ihj \$215 ghi
Split using \$ as delimiter
Length = 3
sd sewq wee r r ttttt $300 rrtrt utu iwiwi
500 kjgf ihj
215 ghi
Split using $ as delimiter
Length = 4
sd sewq wee r r ttttt
300 rrtrt utu iwiwi \
500 kjgf ihj \

edited Oct 18, 2018 at 13:05

answered Oct 18, 2018 at 12:57

Haroldo_OK

7,3033 gold badges50 silver badges86 bronze badges

3 Comments

Sunil Over a year ago

I tried your suggestion but it results in 1 string after splitting. It should result in 3 elements after splitting.

Haroldo_OK Over a year ago

Worked okay when I tested. I'm posting the full code for reference.

Sunil Over a year ago

Yes, it works now after changing \$ to \\$ in trickyString. I have upvoted your answer. Thanks.

Collectives™ on Stack Overflow

String splitting incorrectly in JavaScript

2 Answers 2

5 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related