Break words to letters in HTML/CSS then store in an array

Question

Is it possible to break a word into letters and store every letter in an array in HTML/CSS?

For example; HAT to array[1]=H, array[2]=A, array[3]=T

If there's an existing thread to this please do let me know.

Answer 1

hmm yes, u can use JS ofcorse.

var words = "any wordds bla bla";
var array = words.split('');

that simple.

Answer 2

While strings are iterables, you could use either Array.from or spread syntax ... for getting an array of chracters. Both techniques rely on the same implemented Symbol.iterator.

var string = 'HAT',
    array1 = Array.from(string),
    array2 = [...string];
    
console.log(array1);
console.log(array2);

Answer 3

var sampleString = 'This is my sample string';

console.log( sampleString.split('') );

Answer 4

In javascript you can do

var parts = ("HAT").split('');

Adding PHP to that there are 2 ways

var parts = ('<?php echo "HAT"; ?>').split('');

The quoting can be a pain this way (note the quotes outside the PHP tags), and the processing takes place on the client (which you have no control of the performance specs)

Or

var parts = <?php echo json_encode(str_split('HAT')); ?>;

JSON (Javascript Object Notation) and json_encode is a way of translating complex data into a string fromat that Javascript understands. This happens server side and is generally better.

The first 2 are basically the same as far as the client goes. The last one will look like this in the source code:

var parts = ["H","A","T"];

And so it's ready to go as far as the client is concerned. This may seem like a small difference, but if you have a large amount of text, it's better to let the server handle it if possible.

It's basically a matter of where you want the processing cost to happen. Clients hardware can vary and you have no way to know what they have. The server is yours to control. So letting the client take the hit, will typically impact page loading times more then the server doing it. Unless you have a junk server and the client has a good PC (which you have no way to know that).

In any case it's a good practice to present the client with the data formatted in the way it needs to be so it can use it with as little work as possible.

Answer 5

Use the split function with this parameter ''. (press SINGLE quote two times) The split function splits a string with another string. This other string is the parameter in the function. For example, in this string "foo,bar", if we will use the split function on this, and you want to split by a comma, we would use myString.split(','). It will return ['foo','bar']. If we separate it by an empty string, which can be in between letters, we would use .split(''). It will return ['f','o','o','b','a','r']. So you can use this to break words into letters. I put example code below.

var myString = "foobar";
var myArray = myString.split('');

---

// returns ['f','o','o','b','a','r']

Edit #1

This works for any character in your string, so if you want to have just the words, you can replace unwanted characters with '' first, and then use the split.

var myString = 'foo:)bar';
var myArray = myString.replace(/\:\)/, '');

---

//returns ['f','o','o','b','a','r']