How do you get a string to a character array in JavaScript?

How do you get a string to a character array in JavaScript?

How do you get a string to a character array in JavaScript?
I’m thinking getting a string like “Hello world!” to the array [‘H’,’e’,’l’,’l’,’o’,’ ‘,’w’,’o’,’r’,’l’,’d’,’!’]

Solutions/Answers:

Solution 1:

Note: This is not unicode compliant. "I?U".split('') results in the
4 character array ["I", "�", "�", "u"] which can lead to dangerous
bugs. See answers below for safe alternatives.

Just split it by an empty string.

var output = "Hello world!".split('');
console.log(output);

See the String.prototype.split() MDN docs.

Solution 2:

Since this question is originally asked more than five years ago, people are still misopetating this type of task. As hippietrail suggests, meder’s answer can break surrogate pairs and misinterpret “characters.” For example:

// DO NOT USE THIS!
> '????'.split('')
[ '�', '�', '�', '�', '�', '�', '�', '�' ]

I suggest using one of the following ES2015 features to correctly handle these character sequences.

Spread-operator (already answered by insertusernamehere)

> [...'????']
[ '?', '?', '?', '?' ]

Array.from

> Array.from('????')
[ '?', '?', '?', '?' ]

RegExp u flag

> '????'.split(/(?=[\s\S])/u)
[ '?', '?', '?', '?' ]

Use /(?=[\s\S])/u instead of /(?=.)/u because . does not match newlines.

If you are still in ES5.1 era (or if your browser doesn’t handle this regex correctly – like Edge), you can use this alternative (transpiled by Babel):

> '????'.split(/(?=(?:[\0-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF]))/);
[ '?', '?', '?', '?' ]

Note, that Babel tries to also handle unmatched surrogates correctly. However, this doesn’t seem to work for unmatched low surrogates.

Test all in your browser:

function run_test(){
  str=document.getElementById('nonBMP').checked ? '?_NL_?_HIGH_?_LOW_?' : '0_NL_1_HIGH_2_LOW_3';
  str=str.replace('_NL_'  ,document.getElementById('nl'  ).checked ? '\n'          : '');
  str=str.replace('_HIGH_',document.getElementById('high').checked ? '?'.charAt(0) : '');
  str=str.replace('_LOW_' ,document.getElementById('low' ).checked ? '?'.charAt(1) : '');
  
  //wrap all examples into try{ eval(...) } catch {} to aloow script execution if some syntax not supported (for example in Internet Explorer)
        document.getElementById("testString"   ).innerText=JSON.stringify(str);
  try { document.getElementById("splitEmpty"   ).innerText=JSON.stringify(eval('str.split("")'));            } catch(err) { }
  try { document.getElementById("splitRegexDot").innerText=JSON.stringify(eval('str.split(/(?=.)/u)'));      } catch(err) { }
  try { document.getElementById("spread"       ).innerText=JSON.stringify(eval('[...str]'));                 } catch(err) { }
  try { document.getElementById("arrayFrom"    ).innerText=JSON.stringify(eval('Array.from(str)'));          } catch(err) { }
  try { document.getElementById("splitRegex"   ).innerText=JSON.stringify(eval('str.split(/(?=[\\s\\S])/u)')); } catch(err) { }
  try { document.getElementById("splitBabel"   ).innerText=JSON.stringify(eval('str.split(/(?=(?:[\\0-\\uD7FF\\uE000-\\uFFFF]|[\\uD800-\\uDBFF][\\uDC00-\\uDFFF]|[\\uD800-\\uDBFF](?![\\uDC00-\\uDFFF])|(?:[^\\uD800-\\uDBFF]|^)[\\uDC00-\\uDFFF]))/)')); } catch(err) { }
}


document.getElementById('runTest').onclick=run_test;
th, td {
    border: 1px solid black;
    padding: 4px;
}
<div><input type="checkbox" id="nonBMP" checked /><label for="nonBMP">Codepoints above U+FFFF</label></div>
<div><input type="checkbox" id="nl"     checked /><label for="nl"    >Newline</label></div>
<div><input type="checkbox" id="high"           /><label for="high"  >Unmached high surrogate</label></div>
<div><input type="checkbox" id="low"            /><label for="low"   >Unmached low surrogate</label></div>
<button type="button" id="runTest">Run Test!</button>

<table>
  <tr><td>str=</td>                     <td><div id="testString"></div></td></tr>
  <tr><th colspan="2">Wrong:</th></tr>
  <tr><td>str.split("")</td>            <td><div id="splitEmpty"></div></td></tr>
  <tr><td>str.split(/(?=.)/u)</td>      <td><div id="splitRegexDot"></div></td></tr>
  <tr><th colspan="2">Better:</th></tr>
  <tr><td>[...str]</td>                 <td><div id="spread"></div></td></tr>
  <tr><td>Array.from(str)</td>          <td><div id="arrayFrom"></div></td></tr>
  <tr><td>str.split(/(?=[\s\S])/u)</td> <td><div id="splitRegex"></div></td></tr>
  <tr><td>str.split(/(?=(?:[\0-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF]))/)</td><td><div id="splitBabel"></div></td></tr>
</table>

Solution 3:

The spread Syntax

You can use the spread syntax, an Array Initializer introduced in ECMAScript 2015 (ES6) standard:

var arr = [...str];

Examples

function a() {
    return arguments;
}

var str = 'Hello World';

var arr1 = [...str],
    arr2 = [...'Hello World'],
    arr3 = new Array(...str),
    arr4 = a(...str);

console.log(arr1, arr2, arr3, arr4);

The first three result in:

["H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d"]

The last one results in

{0: "H", 1: "e", 2: "l", 3: "l", 4: "o", 5: " ", 6: "W", 7: "o", 8: "r", 9: "l", 10: "d"}

Browser Support

Check the ECMAScript ES6 compatibility table.


Further reading

spread is also referenced as “splat” (e.g. in PHP or Ruby or as “scatter” (e.g. in Python).


Demo

Try before buy

Solution 4:

It already is:

var mystring = 'foobar';
console.log(mystring[0]); // Outputs 'f'
console.log(mystring[3]); // Outputs 'b'

Or for a more older browser friendly version, use:

var mystring = 'foobar';
console.log(mystring.charAt(3)); // Outputs 'b'

Solution 5:

You can also use Array.from.

var m = "Hello world!";
console.log(Array.from(m))

This method has been introduced in ES6.

Reference

Array.from

Solution 6:

This is an old question but I came across another solution not yet listed.

You can use the Object.assign function to get the desired output:

var output = Object.assign([], "Hello, world!");
console.log(output);
    // [ 'H', 'e', 'l', 'l', 'o', ',', ' ', 'w', 'o', 'r', 'l', 'd', '!' ]

Not necessarily right or wrong, just another option.

Object.assign is described well at the MDN site.