How to Process Each Letter of Text Using JavaScript

How can I process each letter of text using Javascript?

If the order of alerts matters, use this:

for (var i = 0; i < str.length; i++) {
  alert(str.charAt(i));
}

Or this: (see also this answer)

 for (var i = 0; i < str.length; i++) {
   alert(str[i]);
 }

If the order of alerts doesn't matter, use this:

var i = str.length;
while (i--) {
  alert(str.charAt(i));
}

Or this: (see also this answer)

 var i = str.length;
while (i--) {
  alert(str[i]);
}

var str = 'This is my string';

function matters() {
  for (var i = 0; i < str.length; i++) {
    alert(str.charAt(i));
  }
}

function dontmatter() {
  var i = str.length;
  while (i--) {
    alert(str.charAt(i));
  }
}

<p>If the order of alerts matters, use <a href="#" onclick="matters()">this</a>.</p>

<p>If the order of alerts doesn't matter, use <a href="#" onclick="dontmatter()">this</a>.</p>

Loop through string and style individual letters

@Jon Uleis is right, you cannot style individual characters. But you can style DOM elements, like <span>:

var header = $('#header'),    headerSpans = header.text()                        .split("")                        .map(function(char){                           return $('<span>' + char + '</span>');                        });header.html(headerSpans);
headerSpans[9].css('color', 'red');headerSpans[10].css('color', 'blue');headerSpans[11].css('color', 'green');headerSpans[12].css('color', 'orange');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="header">INTRO TO GRID</div>

Targeting first letter of each word in h1 using javascript

As per OP's request, this will "wrap the first letter of each word".

Since there are two <h1> elements (as OP said, very wrong), one should iterate them using each too, same way OP did with the words array.

$(document).ready(function() {

    $('h1').each( function(index, heading) {
    
      const words = $(heading).text().split(' ')
      let html = '';
      
      $.each(words, function() {
        html += '<span class="firstLetter">'+this.substring(0,1)+'</span>'+this.substring(1) + ' ';
      })
      
      $(heading).html(html);
    })
    
});

span.firstLetter {
  color: violet;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1>Lorem ipsum dolor sit amet</h1>

<hr>

<h1>Bacon ipsum dolor amet biltong pork chop bacon</h1>

Split word into letter and get data of each letter?

You can use a plain regular expression replace for this, without creating any arrays or anything like that:

const target = document.querySelector('.target');target.innerHTML = target.textContent  .replace(/\w/g, '<span data-glitch="$&">$&</span>');console.log(target.innerHTML);

<span class="target">Ride</span>

Doubling each letter in a String in js

Use String#split , Array#map and Array#join methods.

var s = "abc";
console.log(  // split the string into individual char array  s.split('').map(function(v) {    // iterate and update    return v + v;    // join the updated array  }).join(''))