Как поставить подчеркивание к отдельным словам без учета пробелов на jQuery

Если стоит задача поставить подчеркивание под каждым отдельным словом (не включая пробелы), то, как вариант, вы можете обернуть каждое отдельное слово в тег span и к этому тегу проставить соответствующий класс. У данного класса должно присутствовать следующее правило (text-decoration: underline;).

Но что если нам требуется подчеркнуть слова в уже существующем коде и кода так много, что совершенно не рационально обертывать слова в теги и проставлять тегам классы. Для этого нам поможет простой блок кода на jquery.

jQuery

$('h1').each(function() {

    var words = $(this).text().split(' ');

    $(this).empty().html(function() {

        for (i = 0; i < words.length; i++) {
            if (i == 0) {
                $(this).append('<span>' + words[i] + '</span>');
            } else {
                $(this).append(' <span>' + words[i] + '</span>');
            }
        }

    });

});

Затем, чтобы добавить подчеркивание:

CSS

h1 span {
  text-decoration: underline;
}

Похожее и немного более надежное решение: Lettering.js