Разметка

<h1>
  <span class="greeting"></span>
  <span class="greeting-2"></span>
</h1>

В эти два span`а у нас и пойдет необходимая информация. Смотрим. (не забудьте подключить jQuery).

JS (jQuery)

let day = new Date();
let hour = day.getHours();
if (hour>=5 && hour<12) {
  $('h1 .greeting').text('Доброе');
  $('h1.greeting-2').text('утро');
} else if (hour>=0 && hour<5) {
  $('h1 .greeting').text('Доброй');
  $('h1 .greeting-2').text('ночи');
} else if (hour>=12 && hour<18) {
  $('h1 .greeting').text('Добрый');
  $('h1 .greeting-2').text('день');
} else if (hour>=18 && hour<24) {
  $('h1 .greeting').text('Добрый');
  $('h1 .greeting-2').text('вечер');
}

переменная day хранит дату, через getHours мы получаем время нашей системы (то есть, работать это будет везде, независимо от часового пояса). И дальше просто делаем различные условия. Можно сделать через switch, если умеете) Вот так все просто) просто и работает. На всякий случай, прикреплю для Вас codepen, чтобы было удобнее.

Всем спасибо, что вы со мной, удачного применения!