Javascript find text on page

Question

I need to start the search and replace it with HTML like the following ... I need to have the "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 after replacing the value.

The only problem I encountered is that I don’t know exactly how to search for the contents of #sheet and replace the values ​​with the new value that the user 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 have to say that it is possible that I will have TONS of text to search, so ideally I would find only the next instance of the object that was found, and not all instances. Therefore, when I click "Find Next", if I am "m 3", it will go to the fourth.

What is the best way in javascript to support indexing on it without storing all the results found in a variable and causing a delay on the page?

Answer 1

I would build a data object when moving matched elements. Then send the object so you don't have multiple ajax requests from the 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` 

Answer 2

You can select all divs with the class item , which are children of the element with the id sheet as follows:

 $('#sheet > div.item') 

and you can set the text of each div.item with .text() :

 $('#sheet > div.item').text(function (i, oldText) { return oldText.replace('something', 'somethingElse'); }); 

Is this what you are looking for?

Answer 3

If you have to search / replace html, use innerHTML property:

 document.getElementById("sheet").innerHTML 

But keep in mind that the browser saves the DOM in memory as a tree, not as HTML. It only reads HTML to build the DOM. This way, you can find changes in elements faster.

Answer 4

 $('#sheet').children().each(function(){ $(this).html().replace('oldVal', 'newVal'); }); 

Answer 5

Here's a pure Javascript solution. You can save innerHTML from #sheet to a global variable and then use the input search value in new RegExp to replace the found text with whatever you want. So, given the following HTML:

 <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> <input type="text" id="t" /><button id="s" onclick="searchIt()">Search</button> 

You can do something like:

 var sheet, searchIt = function() { var v = document.getElementById('t').value; sheet = (typeof sheet == "undefined") ? document.getElementById('sheet').innerHTML : sheet; document.getElementById('sheet').innerHTML = sheet.replace(new RegExp(v, 'ig'), "<span>$&</span>"); }; 

$& in replacement represents a consistent RegExp.

See working example →