Question

I need to run a search and replace on HTML similar to the following… I need to have “Find Next” “Replace” and “Replace All” options…. the trick is that I need to run an AJAX request to update the values in the database for each field once the value is replaced.

The only trouble I’m running into is that I”m unsure exactly how to search the contents of #sheet and replace the values with the new value the user has provided.

<div id='sheet'>
<div class='item' id='field-18583'>This is yet another test</div>
<div class='item' id='field-18585'>This is test data</div>
</div>

I should say that it’s possible I’ll have TONS of text to search, so ideally I’d only find the next instance of the item that’s being searched for, not all instances. So when I hit “Find Next”, if I”m 3 items in, it’ll go to the 4th.

What’s the best way in javascript to maintain the indexing on this without storing all found results in a variable and causing lag on the page?

Answer 1

I would build a data object while traversing matched elements. Then send the object so you do not have multiple ajax request from a loop. jsfiddle:

<div class='item' id='field-18583'>This is yet another test</div>
<div class='item' id='field-18585'>This is test data</div>

Script:

var searchTerm = 'This is',
    replaceWith = 'This is new',
    updateObj = {};
$("#sheet div.item:contains('" + searchTerm + "')").each(function(){
   // use id to build an update object
    updateObj[this.id.replace('field-', '')] = {
        oldText: searchTerm, 
        newText: replaceWith
    }; // not sure what you are trying to save here
   // manipulate html
   this.innerHTML = this.innerHTML.replace(searchTerm, replaceWith);
});
// after, send ajax data `updateObj`