Issue with JavaScript Array and Split

Question

Please have a look at the below code

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script>

            function ttsSpeak(text)
            {

                var textArray = text.split(" ");
                var finalString="";

                for(var i=0;i<textArray.length;i++)
                {
                    finalString = finalString+textArray[i]+"+";
                }

                alert(finalString);
            }
        </script>

    </head>
    <body>
        <div><p id="text">In meteorology surface.
            </p></div>
        <div><button id="speak" onclick="ttsSpeak(document.getElementById('text').innerHTML);">Speak</button></div>
    </body>
</html>

In here, my expected output is,

In+meteorology+surface+

But instead, I got the below

enter image description here

What have I done wrong here?

Amadan · Accepted Answer · 2014-05-29 06:35:22Z

2

To help you visualise the reason, if you replace all the spaces in your HTML with an underscore, your text paragraph looks like this:

<p id="text">In_meteorology_surface.
____________</p>

with a newline after your text, and a bunch of spaces after it on the second line.

You either want to trim the text before you split it, or you want to split on possibly multiple spaces.

Also, you probably don't want to use innerHTML, but textContent.

answered May 29, 2014 at 6:35

Amadan

200k23 gold badges252 silver badges321 bronze badges

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

Comments

user2864740 · Accepted Answer · 2014-05-29 06:45:52Z

2

The innerHTML contains all the whitespace (i.e. " ") at the end - this is being split to empty strings ("") which are then joined at the end.

The general approach to splitting on white-space as such is to use /\s+/ (split on as much white-space as possible), possibly preceded by a trim.

"foo     ".split(" ")          // -> ["foo", "", "", "", "", ""]
"foo     ".split(/\s+/)        // -> ["foo", ""]
"foo     ".trim().split(/\s+/) // -> ["foo"]

Using /\s+/ will also "fix" the newline issue implicitly.

(Also, see textContent as pointed out by Amadan.)

edited May 29, 2014 at 6:45

answered May 29, 2014 at 6:35

user2864740

62.5k15 gold badges159 silver badges234 bronze badges

Comments

Bergi · Accepted Answer · 2014-05-29 06:36:23Z

1

With the statement

finalString = finalString+textArray[i]+"+";

you're adding the plus sign after every item in your textArray, even in the last iteration. You might use join() instead.

The markup

<p id="text">In meteorology surface.
            </p>

does contain lots of whitespaces you don't want. Remove them by calling trim() on the string before splitting it.

alert(text.trim().split(" ").join("+")+"+");

answered May 29, 2014 at 6:36

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Comments

Mihai Frentiu · Accepted Answer · 2014-05-29 06:36:56Z

1

As prompted above, there is additional white space. In future, to avoid unnoticeable whitespace when using split, you can use the trim() function before split.

In your case:

text = text.trim();
var textArray = text.split(" ");

answered May 29, 2014 at 6:36

Mihai Frentiu

1,6221 gold badge10 silver badges9 bronze badges

Comments

Janaka R Rajapaksha · Accepted Answer · 2014-05-29 07:18:56Z

0

Your textArray has elements with their value = " " , a space, because of(between . and </p>):

<p id="text">In meteorology surface.
            </p>

(if there n number of spaces, then your textArray will have n/2 number of elements which their values are just a space; if the n is even and (n/2 - 1) number of elements which their values are just a space if the n is odd)

In php you can use array_filter() to remove these empty objects from the array.

In javascript you can do as follows:

function isSpace(element){
 if(element != " " || element != "") return element;
}
textArrayWithoutEmptyObjects = textArray.filter(isSpace));

Further Reading about array filter in javascript is here

answered May 29, 2014 at 7:18

Janaka R Rajapaksha

3,7741 gold badge29 silver badges29 bronze badges

Comments

Omprakash · Accepted Answer · 2017-08-01 17:22:29Z

0

In for loop,you can write this finalString = finalString+textArray[i]+"+"; and it will give your expected output.

answered Aug 1, 2017 at 17:22

Omprakash

861 silver badge9 bronze badges

Collectives™ on Stack Overflow

Issue with JavaScript Array and Split

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related