Javascript regex to match part of a string with item from a list

Question

I've got stuck with this one. Got a string, just as this one:

<div id="result">Hello there Paul :) How are you</div>

Now I'd like to replace the smiley face with an image. If that was a single instance it wouldn't give me any headache. This is what I've got:

$.fn.emoji = function(){
    var keys = ':-D|:D|:-)|:)|;-)|;)|:-O|:o|:-P|:p|:-(|:(|:-S|:s|:-l|:l|B-)|B)|*-)|*)|8ol|8l';

    return this.each(function(){
       var regex = new RegExp('(' + keys + ')', 'g');
       $(this).html($(this).html().replace(regex, <img />));
    });
};

What I'm trying to do is find if any of the keys are within the string and then replace it with an image. But my RegExp object is completely wrong. Anyone's able to fix it?

Even if you get this working, wouldn't it replace all smileys with the same image? Is this behavior really what you want? — Arg0n
– Arg0n, Commented Nov 20, 2015 at 20:09

Piyin · Accepted Answer · 2015-11-20 20:17:25Z

1

You have to escape the special characters on your RegExp. Here you have your modified code so you don't have to bother with all that escaping:

$.fn.emoji = function(){
    var keys = [':-D',':D',':-)',':)',';-)',';)',':-O',':o',':-P',':p',':-(',':(',':-S',':s',':-l',':l','B-)','B)','*-)','*)','8ol','8l'];
    for(var key in keys){
        //Taken from http://stackoverflow.com/a/6969486/5503625
        keys[key] = keys[key].replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
    }
    keys = '('+keys.join(')|(')+')';

    return this.each(function(){
       var regex = new RegExp('(' + keys + ')', 'g');
       $(this).html($(this).html().replace(regex, '<img />'));
    });
};

https://jsfiddle.net/6s3h1j3j/

answered Nov 20, 2015 at 20:17

Piyin

1,8341 gold badge18 silver badges24 bronze badges

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

Comments

Linus Oleander · Accepted Answer · 2015-11-20 20:04:55Z

0

You need to group you emojs like /(:D)|(:-D)/. ) also needs to be escaped, like /\)/.

answered Nov 20, 2015 at 20:04

Linus Oleander

18.2k15 gold badges71 silver badges104 bronze badges

Comments

user4090029 · Accepted Answer · 2015-11-20 20:14:06Z

0

It didn't work cause of containing some special characters: (, ), *.

So, you need to add \ before that characters.

Example: Clicking on the <div>

$('div').click(function () {
  alert($(this).text().replace(/:\)|:-\)/g, '<img />'));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Hello there Paul :) How are you :-) </div>

answered Nov 20, 2015 at 20:14

user4090029

Collectives™ on Stack Overflow

Javascript regex to match part of a string with item from a list

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related