Обновлен массив, отражают изменения?

Question

У меня есть этот фрагмент кода, который просматривает ввод пользователя и затем выделяет весь текст в верхнем регистре. Я использовал RegExp и splice для замены, но я не могу понять, как показать результаты на экране, только в консоли.

var allCaps = new RegExp(/(?:[A-Z]{3,30})/g);
var capsArray = [];
var capsFound;
var capitalErrorsList = '';

while (capsFound = allCaps.exec(searchInput)) {
    capsArray.push(capsFound[0]);
}

if(capsArray.length > 0){
    resultsLog.innerHTML += "<p><span class='warning'>Is this an abbreviation? If yes, ensure you have the full version included after its first use.</span></p>";
    for(var five = 0; five < capsArray.length; five++) {
        //display associated text
        capitalErrorsList += '<li>' + capsArray[five] + '</li>';

        capsArray.splice(0, 1, '<span style="background-color: yellow;">'+capsArray[five]+'</span>');

        console.log(capsArray);
    }

    resultsLog.innerHTML += '<ul>' + capitalErrorsList + '</ul>';

}
else {
    resultsLog.innerHTML += "";
}

Добавление в этот кусок кода было шкафом, который я получил, но он дал очень странные результаты.

searchInput = document.getElementById('findAllErrors').innerHTML;
        searchInput = searchInput.replace(capsArray[five], function(){
            return capsArray.splice(0, 1, '<span style="background-color: yellow;">'+capsArray[five]+'</span>');

        });

Answer 1

Я думаю, что у вас может быть проблема XY.

Если вы хотите выделить заглавные буквы в этом входе, то вы правы, что хотите обернуть их в <span>, Однако, если вы решили использовать регулярные выражения, как насчет замены регулярных выражений?

var searchInput = document.getElementById('searchInput').innerText;
var replacedText = searchInput.replace(/(?:[A-Z]{3,30})/g, '<span style="background-color: yellow;">$&</span>');
document.getElementById('findAllErrors').innerHTML = replacedText;

Вот обновленная скрипка для вас.

Если вы настроены на операции с массивами, map() создает новый массив, применяя функцию к входному массиву. Итак, для вашего примера:

var highlighted = capsArray.map(function(caps) {
    return '<span style="background-color: yellow;">' + caps + '</span>';
});