如何使用JS将String替换为图像

时间:2016-02-11 17:23:58

标签: javascript replace reactjs

我正在尝试实现一个由Smilies :)组成的聊天系统。我正在使用react js,我想检查并替换接收字符串中的笑脸符号。

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

我要检查的字符串由{item.message}给出。香港专业教育学院尝试用{item.message}.replace(/:)/g,'<img src="../../../img/smileys/smile53893.gif"/>');

替换字符串

但它不起作用!

1 个答案:

答案 0 :(得分:3)

您正在做的是将图像标记作为字符串插入DOM。您需要创建真实的反应元素,并将:)替换为<img/>元素。

这是您的代码的简化版本。为你做了demo这个。

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