CODEWITHSUNDEEP
javascriptvariablesreplace
Ali
Ali

Reputation: 187

find and replace text dynamically Javascript (case insensitive)

I've been searching, and I found this Question from stack overflow so I've been trying to make it work with my code, and I can't seem to get it to work.

    html = '<li style="list-style:none;">';
                cmnt = this.comment.replace(new RegExp( "(" + preg_quote( firsttext ) + ")" , 'gi' ), "<span class='cutecl'>$1</span>");
                cmnt = cmnt.replace(new RegExp( "(" + preg_quote( secondtext ) + ")" , 'gi' ), "<span class='wincl'>$1</span>");
                cmnt = cmnt.replace(new RegExp( "(" + preg_quote( thirdtext ) + ")" , 'gi' ), "<span class='failcl'>$1</span>");
                html += cmnt;
                html += '<br/><a href="http://www.youtube.com/userPage.php?author='+escape(this.author)+'">'+this.author+'</a>';
                html += '<span class="label"> - '+(this.published.getMonth() + 1)+'/'+this.published.getDate()+'/'+this.published.getFullYear()+'</span>';
                html += '</li>';
                $('#comment').append(html);

and of course:

function preg_quote( str ) {
return (str+'').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, "\\$1");

}

when I have 

 cmnt = this.comment.replace(new RegExp( "(" + preg_quote( firsttext ) + ")" , 'gi' ), "<span class='cutecl'>$1</span>");
            cmnt = cmnt.replace(new RegExp( "(" + preg_quote( secondtext ) + ")" , 'gi' ), "<span class='wincl'>$1</span>");
            cmnt = cmnt.replace(new RegExp( "(" + preg_quote( thirdtext ) + ")" , 'gi' ), "<span class='failcl'>$1</span>");

included in my code nothing appears when I want it to create that li, but if its gone, it works fine, any clue what I'm doing wrong? thanks in advance, ali

Here is a fiddle of the problem: http://jsfiddle.net/Yg8Qe/2/

Upvotes: 0

Views: 1273

Answers (1)

Matt Ball
Matt Ball

Reputation: 360066

After getting more info from the OP, here's the fix: don't hard-code the $1s in the replacement strings.

function preg_quote(str) {
    return (str + '').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, "\\$1");
}

function wrap(data, search, before, after) {
    return data.replace( new RegExp( preg_quote( search ), 'gi' ), before + search + after );
}

var var1 = "var1",
    var2 = "var2",
    var3 = "var3",
    cmnt = "this comment will be replaced with var1 var2 var3";

cmnt = wrap(cmnt, 'var1', '<span class="cutecl">', '</span>');
cmnt = wrap(cmnt, 'var2', '<span class="wincl">', '</span>');
cmnt = wrap(cmnt, 'var3', '<span class="failcl">', '</span>');

$('#comment').append('<li style="list-style:none;">' + cmnt + '</li>');

Lots of code cleanup here: indentation, semicolons, eliminating unnecessary variables, and putting the "wrap" logic into a nice, reusable function.

Demo →

It looks like you're missing a cmnt = this.comment. in the first line in the code that "isn't working."

// ↓↓↓ right here
cmnt = this.comment.replace(new RegExp( "(" + preg_quote( firsttext ) + ")" , 'gi' ), "<span class='cutecl'>$1</span>");
cmnt = cmnt.replace(new RegExp( "(" + preg_quote( secondtext ) + ")" , 'gi' ), "<span class='wincl'>$1</span>");
cmnt = cmnt.replace(new RegExp( "(" + preg_quote( thirdtext ) + ")" , 'gi' ), "<span class='failcl'>$1</span>");

Upvotes: 1

Related Questions