JS Array Find and Replace?

Question

I have a regular expression happening that searching for all the capitals in a document. It gathers them and puts them into an array no problem.

The issue I am having is I want to replace the items in that array to include a span around each item that was captured in the array and then display the updated result. I've tried a variety of things.

I am at a complete loss. Any help is appreciated. Here was my last attempt

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

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


    //for(var x = 0; x < capsArray.length; x++){

            //var test = ;
            capsArray.splice(0, '<span style="color:green">'+ capsArray +'</span>');

    //}
}

Did you mean capsFound === allCaps.exec(searchInput)

Brr Switch
– Brr Switch

2017-09-18 15:03:31 +00:00
Commented Sep 18, 2017 at 15:03 — Brr Switch
– Brr Switch, Commented Sep 18, 2017 at 15:03

Alnitak · Accepted Answer · 2017-09-18 15:05:44Z

5

You can't convert an entire array's elements like that using splice - you can use .map instead:

capsArray = capsArray.map(c => '<span style="color:green">' + c + '</span>');

answered Sep 18, 2017 at 15:05

Alnitak

341k72 gold badges420 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

treyhakanson · Accepted Answer · 2017-09-18 15:08:18Z

1

Do you need the results in an array? If not, you can wrap all caps in a str using a modified regex:

str.replace(/([A-Z])/g, '<span>$1</span>')

example:

'A--B--C' becomes 'A---B---C'

if the array is needed for whatever reason:

str.split(/[^A-Z]+/g).map(x => `<span>${x}</span>`)

example:

'A--B--C' becomes ['A', 'B', 'C']

edited Sep 18, 2017 at 15:08

answered Sep 18, 2017 at 15:06

treyhakanson

5,0112 gold badges20 silver badges35 bronze badges

1 Comment

Alnitak Over a year ago

there's also the version of .replace that takes a callback function

RW Hammond · Accepted Answer · 2017-09-18 16:23:34Z

Thanks to everyone for the help.

Heres my final solution for anyone else that gets lost along the way

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

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

if(capsArray.length > 0){
    resultsLog.innerHTML += "<br><span class='warning'>So many capitals</span><br>";
    searchInput = document.getElementById('findAllErrors').innerHTML;
    searchInput = searchInput.replace(/([A-Z]{3,30})/g, '<span style="background-color:green">$1</span>');
    document.getElementById('findAllErrors').innerHTML = searchInput;
}
else {
    resultsLog.innerHTML += "";
}

Collectives™ on Stack Overflow

JS Array Find and Replace?

3 Answers 3

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Related