How to replace String with an image using JS

Question

I'm trying to implement a chat system which consist of Smilies :) . i'm using react js and i want to check and replace the smiley symbols in the receiving string.

  return(<ListItem
           leftAvatar={<Avatar src="profile pic" />}
           primaryText="Name"
           secondaryText={
          <p>
         {item.message}
         </p>
          }
           secondaryTextLines={2}
          />
               );

the string i want to check is given by {item.message}. ive tried to replace the string with {item.message}.replace(/:)/g,'<img src="../../../img/smileys/smile53893.gif"/>');

but it doesn't work!

Jarno Lonardi · Accepted Answer · 2016-02-11 17:49:48Z

3

What you are doing there is that you are inserting the image tag as an string into the DOM. You need to create real react elements, and replace the :) with the <img/> elements.

Here is a simplified version your code. Made also a demo about this for you.

var texts = item.message.split(/:\)/g);
var content = [];
for(var i = 0; i < texts.length - 1; i++) {
  content.push(texts[i]);
  content.push(<img src='https://upload.wikimedia.org/wikipedia/commons/e/e2/Bye.gif'/>);
}
return <div>{content}</div>;

answered Feb 11, 2016 at 17:49

Jarno Lonardi

3961 silver badge8 bronze badges

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

2 Comments

TRomesh Over a year ago

thanks its working but i've a small issue when ever i pass a string without a smiley it doesn't return anything. and even if i pass a string containing a smiley the text after the smiley will not be displayed. please help.

Matt Over a year ago

@TRomesh did you ever figure out how to have it display the text without an emoji? Currently debugging the same issue. Thanks!

Collectives™ on Stack Overflow

How to replace String with an image using JS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related