Javascript Regular expression with replace

Question

I'm working on a project on search about emoji and replace it with icon but I have some problem on regular expression, Below mentioned is my code for reference:

var f = ["( :3 )" , "( :P )","\(:star:\)"];

var re =  function(s){return new RegExp(s, 'g');};

now when I'm going to search about emoji and replace it as shown below:

s = "hello :D how are you :P dwdwd";
for(var n in f){    

var m; 
if ((m = re(f[n]).exec(s)) !== null) {

m.forEach((match, groupIndex) => {
  s = s.replace(match,"<img src='http://abs.twimg.com/emoji/v1/72x72/"+ r[n] +".png'>");
});

}}

In this case, it works well and replace the emoji. But it only replace when there are space before and after emoji what should i do to replace the emoji in the begin of string or end !

s = ":D hello how are you :)";

This case is not working. How can i edit my regular expression for being able to replace emoji at begin and end of string and at the same time if its found in middle of string & have space between word and emoji

My 2nd problem with regular expression is "$:star:$" it never replaces. While it must replace word :star: with an emoji but i think i miss some thing on regular expression for it.

for..in is meant to loop on properties of object. So in old browsers, for..in will also iterate over .length property — Rajesh Dixit
– Rajesh Dixit, Commented Feb 27, 2017 at 12:33
Could you make your code clearer by indenting/formatting it properly and finding meaningful names for your variables? Quite hard to understand what f, re, s, n and m are supposed to hold... Also, could you provide what "hello :D how are you :P dwdwd" should be replaced with at the end? — sp00m
– sp00m, Commented Feb 27, 2017 at 12:44

Soubhik Mondal · Accepted Answer · 2017-02-27 12:47:36Z

1

You can use beginning & ending anchors along with pipe to achieve this. For example:

/(^:3\s)|(\s:3\s)|(\s:3$)/g

^ is an anchor which matches :3\s to the beginning of the string.

$ is an anchor which matches \s:3 to the end of the string.

\s matches whitespace.

| is the pipe operator which acts as a logical OR operator between the different capture groups.

answered Feb 27, 2017 at 12:47

Soubhik Mondal

2,6661 gold badge15 silver badges19 bronze badges

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

1 Comment

Mohamed Mohamed Over a year ago

thank you its work for my code its would be var f = ["(^:3\\s)|(\\s:3\\s)|(\\s:3$)" , ..... ] because i use new RegExp more information here

hityagi · Accepted Answer · 2017-02-27 12:48:19Z

0

Just remove the spaces from your emoji regex.

var f = ["(:3)", "(:P)", "\(:star:\)"];
var r = ["[sadface]", "[toungeface]", "[staremoji]"];

var re = function(s) {
  return new RegExp(s, 'g');
};

s = "hello :3 how are you :P dwdwd :star: :3";
console.log(s);
for (var n in f) {
  var m;
  if ((m = re(f[n]).exec(s)) !== null) {
    m.forEach((match, groupIndex) => {
      s = s.replace(match, r[n]);
    });
  }
}

console.log(s);

answered Feb 27, 2017 at 12:48

hityagi

5,2561 gold badge26 silver badges44 bronze badges

1 Comment

vatz88 Over a year ago

If you read the question he says that if it's found in middle of string there must be space between word and emoji. Your code will also work for hello:3 with hello[sadface] which it should not.

Ali Khan · Accepted Answer · 2017-02-27 13:00:07Z

0

var content = "hello :D how are you :P dwdwd";
content = content.replace(/((:D|:P))/g,function(match){
  var result = "";
  
  var index = -1;
  switch(match)
  {
    case ":D":
      result = "happy";
      index = 0
      break;
    case ":P":
      result =  "smilie";
      index = 1
      break;
  }
  if(index != -1)
  {
    return "<img src='http://abs.twimg.com/emoji/v1/72x72/"+index+".png'>";
  }
  return result;
});
console.log(content);

Please try this.

answered Feb 27, 2017 at 13:00

Ali Khan

1082 silver badges8 bronze badges

Comments

Scott Sauyet · Accepted Answer · 2017-03-01 15:38:28Z

I created a more generic solution, starting with the mapping of emojis to the relevant names. Rather than two lists that need to be kept in synch, I used a single object:

const emojis = {
  '(c)': 'a9',
  '(r)': 'ae',
  '(tm)': '2122'
  //, ...
};

This strikes me as a much more useful structure to work with, but the code below could easily be altered to deal with the two-lists version.

Then I use a helper function to escape characters which are not allowed as plain text in Regular Expression by prepending them with \:

const escapeSpecials = (() => {
  const specials = ['/', '.', '*', '+', '?', '|', '(', ')', '[', ']', '{', '}', '\\'];
  const reg = new RegExp('(\\' + specials.join('|\\') + ')', 'g');
  return str => str.replace(reg, '\\$1'); 
})();

Then I have the key function:

const replaceStringsWith = (emojis, convert) => str => Object.keys(emojis).reduce(
  (str, em) => str.replace(new RegExp(`(^|\\s+)(${escapeSpecials(em)})($|\\s+)`, 'g'), 
                           (m, a, b, c) =>  `${a}${convert(emojis[b], b)}${c}`),
  str
);

This takes an object containing string/replacement pairs and a converter function which accepts the replacement and gives you back the final form. It returns a function which takes a string, and then searches for any matches on the keys of the object (properly checked for strings or string ends), replacing them with the result of calling the converter on the object's value for the particular key.

Thus we can do:

const toUrl = (name) => `<img src='http://abs.twimg.com/emoji/v1/72x72/${name}.png'>`; 
const replaceEmojis = replaceStringsWith(emojis, toUrl)

and call it as

const s = "This is Copyright (c) 2017, FooBar is (tm) BazCo (r)";
replaceEmojis(s); //=>
// `This is Copyright <img src='http://abs.twimg.com/emoji/v1/72x72/a9.png'>
// 2017, FooBar is <img src='http://abs.twimg.com/emoji/v1/72x72/2122.png'>
// BazCo <img src='http://abs.twimg.com/emoji/v1/72x72/ae.png'>`

Note that the converter also takes a second parameter. So you could instead use

const toUrl = (name, emoji) => 
  `<img src='http://abs.twimg.com/emoji/v1/72x72/${name}.png' title='${emoji}'>`;

to get

//=> `This is Copyright <img    
// src='http://abs.twimg.com/emoji/v1/72x72/a9.png' title='(c)'>
// 2017, FooBar is <img src='http://abs.twimg.com/emoji/v1/72x72/2122.png'
// title='(tm)'> BazCo <img src='http://abs.twimg.com/emoji/v1/72x72/ae.png' title='(r)'>"

Collectives™ on Stack Overflow

Javascript Regular expression with replace

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related