variable array + regular expression not working together?

Question

im making a small smiley script , what it does is to change ::1:: into an image html for a div.

the code as follow:

var smileys = {
  '1': 'http://domain.com/smiley1.gif',
  '2': 'http://domain.com/smiley2.gif',
  '3': 'http://domain.com/smiley3.gif'
};

function checksmileys(){   
x$('.message').each(function() 
  var start = '<img src="';
  var end = '">';
  x$(this).html( x$(this).html().replace(/::(\d+)::/g, start + smileys['$1'] + end) );
});

Checksmileys function is triggered by user event.

However it is not able to get the digit(which is the id) out of a sentence. It kept on producing this <img src="undefined">

My HTML example as follows:

<div id="chat">
   <ul>
     <li class="message">Hi john</li>
     <li class="message">what are you doing</li>
     <li class="message">::1:: nothing</li>
     <li class="message">hi</li>
     <li class="message">nice to meet you ::1::</li>
   </ul>
</div>

Where is my problem here?

georg · Accepted Answer · 2012-03-26 07:31:17Z

2

I guess you need a function here:

html = html.replace(/::(\d+)::/g, function($0, $1) { return start + smileys[$1] + end })

here's when the functional form of html() comes in handy

$(this).html(function(_, oldhtml) { 
    return oldhtml.replace(/::(\d+)::/g, function($0, $1) { 
        return start + smileys[$1] + end; 
    })
})

answered Mar 26, 2012 at 7:31

georg

216k57 gold badges324 silver badges401 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

T.J. Crowder · Accepted Answer · 2012-03-26 07:36:42Z

0

In JavaScript, property names don't have prefixes like they often do in PHP. The name of the property you create in your smileys object is 1, not $1, so change smileys['$1'] to smileys['1'].

Update: From your comment below, it seems you're trying to use $1 to refer to the capture group. That only works when $1 is part of the string you pass in, but the expression start + smileys['$1'] + end is evaluated before the call to replace and then passed into it. smileys['$1'] will be undefined.

Since you're trying to do a lookup, your best bet is to pass in a function that does the lookup:

x$(this).html( x$(this).html().replace(/::(\d+)::/g, function(m, c1) {
    return start + smileys[c1] + end;
}) );

c1 is the text of the first capture group. More

You've called it an array, which I'm guessing is because you're used to the term "associative array" from PHP. Your smileys object is just an object, not an array. In JavaScript, when we say "array", we mean something created via [] or new Array, which has specific handling for a certain class of property names (numeric ones), a special length property, and some handy array-like functions. What you've done with smileys is perfectly fine and completely normal, we just tend not to use the word "array" for it ("map" is more common in the JS world).

edited Mar 26, 2012 at 7:36

answered Mar 26, 2012 at 7:28

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

3 Comments

sm21guy Over a year ago

no , $1 is from the regular expression. it gets 1 out of ::1::

T.J. Crowder Over a year ago

@sm21guy: No, it isn't. To be used in the regular expression, it has to be part of the string you're passing into replace. But it isn't, the expression it's a part of is evaluated before replace is called, and then passed into it. $1 in your code is the name of a property you're looking up on smiley. With your code above, smileys['$1'] will be undefined. Nothing whatsoever to do with replace.

T.J. Crowder Over a year ago

@sm21guy: I've updated the answer to show you how to do what you're trying to do.

Collectives™ on Stack Overflow

variable array + regular expression not working together?

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related