Обернуть каждое слово в тег

Приведенный вами код можно преобразовать к такому виду:

var container = document.querySelector(".symbols"); 
var arr = container.innerHTML.split(/\s+/); 
var str = ''; 
 
for(var i = 0; i < arr.length; i++) 
{ 
    if(arr[i]){ 
        arr[i] = '<span>'+arr[i]+'</span>'; 
    } 
} 
 
container.innerHTML = arr.join(' ');

   <div class="symbols">lorem ipsum sit ammet dolar </div>

Здесь множественные пробелы учитываются, но не переносятся в окончательный вариант (заменяются одним пробелом).

Например можно так (ES6):

str.split(' ').map(s => `<div>${s}</div>`).join(' ')

Или, если нет возможности использовать шаблонные строки и arrow-функции:

str.split(' ').map(function (s) { return '<div>' + s + '</div>'; }).join(' ');

Вообще говоря, точная реализация зависит от контекста.

Проблема кода в вопросе в том, что цикл идет по символам строки, а не по словам, поэтому оборачивается каждый символ.

Для исправления нужно идти по словам.

Либо, как вариант, воспользоваться методом replace с регулярным выражением

var container = document.querySelector(".symbols"); 
var str = container.innerHTML; 
container.innerHTML = str.replace(/\b[^\s]+?\b/g, $0 => `<span>${$0}</span>`);

span { 
  border: 1px solid green; 
}

<div class="symbols">Cras ultricies ligula sed magna dictum porta</div>