How to use find and replace with JavaScript arrays?

Question

How to use find and replace with JavaScript arrays?

I've been working on a regular expression that searches for all capital letters within a document and successfully stores them in an array. However, I'm struggling to wrap each item in the array with a span tag before displaying the updated result.

Despite numerous attempts, I haven't been able to figure it out. Any assistance would be greatly appreciated. Below is my most recent 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>');

    //}
}

javascript arrays

Answer 1

Answer №1

To transform all elements in an array, avoid using splice and try utilizing .map method instead:

updatedArray = updatedArray.map(item => '<span style="color:red">' + item + '</span>');

Answer 2

To transform all elements in an array, avoid using splice and try utilizing .map method instead:

updatedArray = updatedArray.map(item => '<span style="color:red">' + item + '</span>');

Answer 3

Answer №2

Are you looking to extract results in an array format? If not, you can use a modified regex to wrap all capitalized letters in a string:

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

For example:

'A--B--C' will turn into

'<span>A</span>---<span>B</span>---<span>C</span>'

If you do need the results in an array for any specific reason:

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

For instance:

'A--B--C' will transform into

['<span>A</span>', '<span>B</span>', '<span>C</span>']

Answer 4

Are you looking to extract results in an array format? If not, you can use a modified regex to wrap all capitalized letters in a string:

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

For example:

'A--B--C' will turn into

'<span>A</span>---<span>B</span>---<span>C</span>'

If you do need the results in an array for any specific reason:

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

For instance:

'A--B--C' will transform into

['<span>A</span>', '<span>B</span>', '<span>C</span>']

Answer 5

Answer №3

Appreciate all the assistance from everyone.

Here is the final solution that I came up with for anyone who may encounter similar challenges:

var findCapitalWords = new RegExp(/(?:[A-Z]{2,30})/g);
var capitalWordsArray = [];
var foundCapitalWords;

while (foundCapitalWords = findCapitalWords.exec(searchInput)) {
    capitalWordsArray.push(foundCapitalWords[0]);
}

if(capitalWordsArray.length > 0){
    resultsLog.innerHTML += "<br><span class='warning'>Too many capital letters!</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 += "";
}

Answer 6

Appreciate all the assistance from everyone.

Here is the final solution that I came up with for anyone who may encounter similar challenges:

var findCapitalWords = new RegExp(/(?:[A-Z]{2,30})/g);
var capitalWordsArray = [];
var foundCapitalWords;

while (foundCapitalWords = findCapitalWords.exec(searchInput)) {
    capitalWordsArray.push(foundCapitalWords[0]);
}

if(capitalWordsArray.length > 0){
    resultsLog.innerHTML += "<br><span class='warning'>Too many capital letters!</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 += "";
}

How to use find and replace with JavaScript arrays?

Answer №1

Answer №2

Answer №3

Similar questions

Limit user input in TextField to positive unsigned integers using ReactJS Material-UI

Retrieve the information outputted by a specific node module

Navigation bar not visible when scrolling

What causes the initial button to transmit their unique values, while the rest are unable to do so within the same container

"Warning in Vue: It seems like the $attrs object is set to read-only. Another warning in Vue: The

Tips for updating the color, background, and height of the particle background using react-tsparticles

data-cy appears in the DOM structure, yet remains unseen

KnockoutJS fails to create observables out of JSON data

Specializing function templates for arrays in C++ involves creating specific implementations that are

Displaying the saved MTRC (markdown-to-react-components) content from the database

A guide on organizing dates in a datatable using the dd-MMM-yyyy hh:mm tt format

Dynamic Color Transformation of Threejs Vehicles during Execution

When using Google login in React and Node.js, the requested scope may not be returned as expected

How to Traverse Through Every Element in a For Loop with NodeJS

Using Angular's ng-switch directive within a select dropdown option

Images in Chrome are shivering when animated at unconventional positions

An uncaught SyntaxError occurred due to an omission of a closing parenthesis after the argument list in code that is otherwise

Executing Child Validators when moving to the next step in an Angular MatStepper from the Parent Component

The scaling of the viewport does not seem to be functioning properly on the mobile device

JavaScript-based Dropdown Menu Selection Without Relying on jQuery