更新数组，反映变化？

Question

我有一段代码可以搜索用户输入，然后突出显示所有大写文本。我使用了 RegExp 和拼接来进行替换，但我似乎无法弄清楚如何在屏幕上显示结果，只能在控制台中显示。

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 problem 的情况。

如果您想突出显示该输入中的大写字母，那么您想要将它们包裹在 <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;

Here's 为您更新的 fiddle。

如果您设置了数组操作，map() 会通过对输入数组应用一个函数来创建一个新数组。因此，对于您的示例：

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

更新数组，反映变化？

Updated array, reflect changes?

javascript

arrays

splice