变量数组+正则表达式不能一起工作？

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?

Answer 1

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

Answer 2

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).