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 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>';
});

更新数组，反映变化？

1 个答案: