find and replace text dynamically Javascript (case insensitive)

Question

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/

As an aside am I missing something or doesn't JS use `\1` for its match reference, not `$1`? — Brad Christie, Mar 16 '11 at 23:46
@Brad Christie it's totally possible, I was just using what information I gathered from the other question :p — Ali, Mar 17 '11 at 01:30

Matt Ball · Accepted Answer · 2011-03-18T01:48:17.247

1

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>");

edited Mar 18 '11 at 01:48

answered Mar 18 '11 at 00:19

Matt Ball

354,903
100
647
710

the reason I had it like that was if you take that from the first code block, you get cmnt = this.comment and then html += cmnt it doesn't actually look like that in the code, it looks like the first block of vode does – Ali Mar 18 '11 at 00:51
Okay, so that was intentional? On its own, the third block of code in your question (the one I "corrected") is not syntactically valid. It would help if you could edit your question to be clearer about exactly what the code is that you're trying. A [demo](http://jsfiddle.net) of the problem would be useful, too. – Matt Ball Mar 18 '11 at 00:54
alright, I'm sorry, I'll have the fiddle up asap, http://jsfiddle.net/Yg8Qe/2/ I guess that works, I tried my best to cut the useless stuff out of the code, I might have made some mistakes, thanks – Ali Mar 18 '11 at 01:09
No worries, I'm just trying to help solve your problem :) I'll take a look at the fiddle now. – Matt Ball Mar 18 '11 at 01:18
I forgot to add Jquery to the resources -.- sorry about that lmao, and forgot to add the css styles, Never really used fidler before, haha – Ali Mar 18 '11 at 01:20
Okay, so the output I see is this: `this comment will be replaced with $1 $1 $1`. What should it be? This: `this comment will be replaced with var1 var2 var3`? – Matt Ball Mar 18 '11 at 01:23
yeah, and eventually with the texts having a class so I can modify color or font or weight, on other examples I saw them using $1 to represent the variable without changing the format IE. HEllo would stay as that rather then become Hello, I hope that makes sense – Ali Mar 18 '11 at 01:26
Okay, I think I see the problem here - you're hard-coding the `$1`s. Throwing a solution together now. – Matt Ball Mar 18 '11 at 01:36
I would never have come up with that, thanks a lot, been stuck on this for ages! – Ali Mar 18 '11 at 01:48
The changes were very minimal. Most of it was just code cleanup (as my edited answer talks about). Try to write clean JS and the simple errors will become a lot more obvious. [JSLint](http://jslint.com) is a great tool in this regard - and jsfiddle even has this built in! – Matt Ball Mar 18 '11 at 01:49
yeah, I have a pretty bad habit of making ugly codes that miraculously work, thanks for the help Matt! – Ali Mar 18 '11 at 02:10

find and replace text dynamically Javascript (case insensitive)

1 Answers1