JavaScript search and replace text on a webpage
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I'm working on a Chrome Extension to replace the text on a page with something else. I started with some code I found online which works in most cases, but only if the text is contained in a single tag.

For example, if I was searching for "string one", it would match:

string one

but not

string one (I can't get this to show up here, but the "one" is inside a bold tag)

I want someone to write a function (or ideally the entire Chrome extension) that will search the whole document for a regex and replace it with a string. I'm searching for several different regex expressions, so it would be more efficient if it only went through the document once. I have a function that generates the replacement string, so if your script finds the regex match, it should call a function and pass the matching string.

function replacementText(matchingString) {
//my code here
}

The regex expressions I'm looking for are in an array, which will be passed to the function you write.

function findAndReplace(regexArray) {
//this is the function you write
}

Let me know if you have questions or if something isn't clear. Thanks.

... (or ideally the entire Chrome extension) ... for $5??
mashtullah 6 months ago
@dude8604, give me a sample array i make the function, thanks
mashtullah 6 months ago
awarded to mashtullah

Crowdsource coding tasks.

1 Solution

Winning solution

This is my final solution, it will replace and highlight any text in the whole html body, if you want a specific tag only its also possible, just specify the tag in the constructor.
just replace the 'REPLACE_STRING_HERE' value with what you want to replace the string with
try this out, then let me know.
https://mashtullah.github.io/Search_Highlight_Replace_Text
Would have done a full chrome extension but the bounty is on the lower side...

The replacement function replaces the text too many times. For example, "string one" gets replaced with "REPLACESTRINGHERE REPLACESTRINGHERE" instead of just "REPLACESTRINGHERE"
dude8604 6 months ago
I have updated my solution,it is now replacing only the required number of times please check it out.
mashtullah 6 months ago
The problem was that the search string is split into words and the replacement was being done for each word, so i have fixed that and its fine now.
mashtullah 6 months ago
That works better. Would you be able to convert the example into a function like I specified in the request? If you do that and it works like I described. I'll award you the bounty. Thanks.
dude8604 6 months ago
this is what i have understood so far, you want to have this function only unction findAndReplace(regexArray) { //this is the function you write } where you pass the regex array and the function will search the whole document and replace the text right? Can you give me a sample of the regex array you are looking at, just limit it to around 3 to 4 items(for readability) Which i can test with
mashtullah 6 months ago
View Timeline