Javascript find text on page

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 r

Answer 1

You can select all divs with class item that are children of the element with ID sheet like so:

$('#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 that what you're looking for?

Answer 2

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

Answer 3

If you must search/replace the html, then use the innerHTML property:

document.getElementById("sheet").innerHTML

But be aware that the browser keeps the DOM in memory as a tree, not as HTML. It only reads HTML to construct the DOM. So you may find element-wise changes are faster.

Answer 4

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`

Answer 5

Here's a pure Javascript solution. You can store the innerHTML of #sheet to a global variable and then use the search input value in a 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 could 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>");
    };

The $& in the replace represents the matched RegExp.

See working example →