更新数组，反映变化？答案

【问题标题】：Updated array, reflect changes?更新数组，反映变化？
【发布时间】：2017-10-12 11:37:45
【问题描述】：

我有这段代码搜索用户输入，然后突出显示所有大写文本。我使用 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>');

        });

【问题讨论】：

在您的小提琴中，您将searchInput（正则表达式在其上执行）设置为document.getElementById('searchInput')，这是一个节点，而不是字符串。尝试将 var searchInput = ... 行更改为 var searchInput = document.getElementById('searchInput').innerText，看看是否更成功。
另外，您可以使用map() 来整理最后的循环。如果这就是你想要做的，请告诉我，我会一起回答。
谢谢本。文本区域中有未知数量的大写字母（例如，这只是一个测试）。对于每个 THIS，ONLY，TEST 应该添加到数组中，循环遍历数组，并且每个大写字母都添加了一个带有黄色突出显示的跨度，以询问为什么要大写。我可以找到大写的单词，但无法将结果返回到文本区域。
我认为我的答案应该可以解决问题。

标签： javascript arrays splice

【解决方案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 为您更新的小提琴。

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

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

【讨论】：

谢谢本。在循环中使用它怎么样？我还有其他一些事情要检查，我将无法在替换中使用 RegExp。
您还需要检查哪些其他事项？如果像第一个这样，在数组上使用map() 可能比循环更好。
你能给我一个 map() 的例子吗？希望我能弄明白。
我的另一个解决方案是： var xMas = new RegExp(capsArray[five], "g"); searchInput = document.getElementById('findAllErrors').innerHTML; searchInput = searchInput.replace(xMas, ''+capsArray[五]+''); document.getElementById('findAllErrors').innerHTML = searchInput;哪个有效，除非有多个相同的文本（即 TEST、TEST、TEST）。然后它在每个 TEST 周围添加了 3 次跨度。
在我的回答中添加了地图功能的示例。