ansaurus

Question

jQuery find/replace without changing original text

Answer 1

+7 A:

You can just use .replace(), for example:

var str = "Hello world to all people";
str = str.replace(/(world to all)/g, "<i>$1</i>");

You can give it a try here applied to say the html of an element:

$("span").html(function(i, t) {
    return t.replace(/(world to all)/g, "<i>$1</i>");
});

Nick Craver 2010-10-30 18:22:41

@nick , that string might be dynamic value right ,

gov 2010-10-30 18:35:55

@gov - if so just use `RegExp(value,"g")` for your regex instead :)

Nick Craver 2010-10-30 18:36:45

@Nick, can you give an example if the value is dynamic?

dennismonsewicz 2010-10-30 18:43:48

@dennismonsewicz - absolutely, here's a more generic version: http://www.jsfiddle.net/nick_craver/Nm2HS/2/

Nick Craver 2010-10-30 18:51:40

This makes me wonder: what if the original text already was wrapped in an element, e.g.: `<b>Hello world</b> to all people`?

Marcel Korpel 2010-10-30 18:58:54

@Nick, I have the regex working but I am having some issues when trying to wrap my selection with element tags. Code is above

dennismonsewicz 2010-10-30 19:15:57

Doing this dynamically could be problematic if the search string contains punctuation (since most of it is significant in regex).

Chuck 2010-10-30 20:25:10

@dennismonsewicz - what are you trying to do? that's not at all what I had in the example/demo... You can't wrap just any text, selectors don't work that way, you need to treat it as a single text node, or loop through all text node children.

Nick Craver 2010-10-30 22:55:08

@Nick, Sorry for not being more thorough in my explanation. I have a script that allows for a user to highlight a word (using this script http://plugins.jquery.com/node/7411) and I have an array of elements (`<b>`, `<i>`, `<a>`) that I loop through to wrap the user selection in... sorry if that doesn't make sense.

dennismonsewicz 2010-10-31 16:16:28

@Nick, I just updated my original post with some working code that is almost there

dennismonsewicz 2010-10-31 16:58:23

Answer 2

A:

I wrote this below function long back, but it may not be so efficient but it works good.

categoryname is the string and userinput is the string you want to highlight, I want to wrap it over bold, you can change to li

function GetHighlightedString(categoryname,userinput) {
    userinput=TrimSS(userinput);
    var tempToSearch=categoryname.toLowerCase(); // to take care of case issue.
    var mysearchTemp=userinput;
    var mytemppos = tempToSearch.indexOf(mysearchTemp.toLowerCase());
    var finalstring=categoryname;
    var str1,str2,str3;
    str1=tempToSearch.substring(0,mytemppos);

    str2=tempToSearch.substring(mytemppos, mytemppos+userinput.length);

    if(userinput.toLowerCase()==str2) 
    {
        finalstring=str1 + '<b>';
        finalstring=finalstring+str2+'</b>';
    }
    else
    {
        finalstring= str1+str2;
    } 

    str3=tempToSearch.substring(mytemppos+userinput.length);
    finalstring=finalstring+str3;
    return finalstring;
}

gov 2010-10-30 18:23:43

Answer 3

A:

I think you might use javascript:

var t= "Hello world to all people";
var output = t.replace("world to", "<i>world to</i>"));
alert(output);

Junior Mayhé 2010-10-30 18:32:01

Answer 4

+2 A:

Altering page content is not, in general, as simple as replacing the html() markup with regex. All such attempts will fail where there is matched text in the markup itself, can fail when the browser chooses to serialise its DOM in a way that doesn't meet your expectations, and at best, when it does work, still forces you to serialise and re-parse all searched text, which is slow and destroys all non-serialisable information, such as form field values, JavaScript references and event handlers. You can get away with that for simple low-level elements, but against a container like <body> it'd be awful.

Better: instead of hacking at an HTML string, stick with the live DOM nodes, searching for Text nodes that match your requirements and doing the replacements on the straight text node data. Here's some plain JS code to do that (I guess you could put it in a plugin if you wanted.)

// Utility function to find matches in an element's descendant Text nodes,
// calling back a function with (node, match) arguments. The `pattern` can
// be a string, for direct string matching, or a RegExp object (which must
// be a `g`lobal regex.
//
function findText(element, pattern, callback) {
    for (var childi= element.childNodes.length; childi-->0;) {
        var child= element.childNodes[childi];
        if (child.nodeType==1) {
            var tag= child.tagName.toLowerCase();
            if (tag!=='script' && tag!=='style' && tag!=='textarea')
                findText(child, pattern, callback);
        } else if (child.nodeType==3) {
            var matches= [];
            if (typeof pattern==='string') {
                var ix= 0;
                while (true) {
                    ix= child.data.indexOf(pattern, ix);
                    if (ix===-1)
                        break;
                    matches.push({index: ix, '0': pattern});
                }
            } else {
                var match;
                while (match= pattern.exec(child.data))
                    matches.push(match);
            }
            for (var i= matches.length; i-->0;)
                callback.call(window, child, matches[i]);
        }
    }
}

Example usage with a plain string search term:

// Replace “World to” string in element text with <i>-wrapped version
//
var element= $('#construct_version')[0];
findText(element, 'World to', function(node, match) {
    var wrap= document.createElement('i');
    node.splitText(match.index+match[0].length);
    wrap.appendChild(node.splitText(match.index));
    node.parentNode.insertBefore(span, node.nextSibling);
});

bobince 2010-10-30 20:48:03

+1. Please listen to this, people.

Tim Down 2010-10-31 22:45:21

ansaurus

tags:

views:

answers:

jQuery find/replace without changing original text

related questions