CODEWITHSUNDEEP
javascriptjquery
Ben
Ben

Reputation: 62384

Javascript find text on page

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?

Upvotes: 6

Views: 22606

Answers (5)

Josiah Ruddell
Josiah Ruddell

Reputation: 29831

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`

Upvotes: 6

mVChr
mVChr

Reputation: 50185

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 →

Upvotes: 0

Tim Joyce
Tim Joyce

Reputation: 4517

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

Upvotes: 0

Matt Ball
Matt Ball

Reputation: 359816

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?

Upvotes: 1

Phil H
Phil H

Reputation: 20141

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.

Upvotes: 1

Related Questions