CODEWITHSUNDEEP
javascriptsplit
Sunil
Sunil

Reputation: 21416

String splitting incorrectly in JavaScript

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>

Upvotes: 1

Views: 96

Answers (2)

Haroldo_OK
Haroldo_OK

Reputation: 7280

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 \

Upvotes: 3

Psytronic
Psytronic

Reputation: 6113

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)

enter image description here

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

Upvotes: 5

Related Questions