splitting a string by  …javascript/jquery

Question

I'm using the bootstrap selectpicker and i need a delimiter to split out the text selected. The reason for this question is when a user selects multiple options in the bootstrap select, the text in not separated by a delimiter like the values:

   <select class="selectpicker" multiple>
       <option value=1>Mustard</option>
       <option value=2>Ketchup</option>
      <option value=3>Relish</option>
       </select>

The javascript to create the picker:

   $('.selectpicker').selectpicker();

The user selects mustard and ketchup. To get the values:

   $('.selectpicker').val();//outputs '1,2'

Notice the comma delimiter. But i need the text as well:

  $('.selectpicker option:selected').text(); //outputs 'MustardKetchup

Notice no delimiter. So i added an invisible delimiter like so:

    <option value=1>Mustard&nbsp;&nbsp;&nbsp;&nbsp;</option>
       <option value=2>Ketchup&nbsp;&nbsp;&nbsp;&nbsp;</option>
      <option value=3>Relish&nbsp;&nbsp;&nbsp;&nbsp;</option>

Now i get the following as expected:

   $('.selectpicker option:selected').text(); //outputs 'Mustard   Ketchup

But when i try to split the string, this doesn't work

  var text = $('.selectpicker option:selected').text(); //outputs 'Mustard   Ketchup
  var splitstr = text.split('    '); //does not split by 4 spaces only has an array of 1

Neither does this:

  var splitstr = text.split('    '); //does not split by 4 spaces only has an array of 1
   //kinda figured this wouldnt work,but took a shot anyway

I chose 4 spaces because my data has commas in it, so a comma delimiter won't work. How do i split a string by 4 spaces ( ) in javascript or jquery?

Thank you

Answer 1

How do i split a string by 4 spaces ( ) in javascript or jquery?

Use regular expressions to split:

var splitstr = text.split(/\s{4}/);

Answer 2

Instead of splitting the string why not try extracting the separate strings into an array by iterating over $('.selectpicker option:selected') like this:

var arr = [];
$('.selectpicker option:selected').each(function() {
    arr.push( $( this ).text() );
});

Answer 3

A non-breaking space isn't a space that we type. It's String.fromCharCode(160) . You'll want to spit it with four of those. If you were doing $('.selectpicker option:selected').html() (which is alright since <option> elements are fairly limited to what elements they can contain), then you could use four   strings as a delimiter.

Here's what I recommend doing though:

var text = $('.selectpicker option:selected').text();
var nbsp = String.fromCharCode(160);
var splitstr = text.split(nbsp + nbsp + nbsp + nbsp);

Answer 4

You could do this without going through the trouble of adding space delimiters to your <option> values by looping through each selected option and adding the value to an array.

var selected = [];
$('.selectedpicker option:selected').each(function() {
    selected.push($(this).text());
}

[Edit]

Toby T beat me to it.