How to insert an HTML object based on what text is inputted


I want to be able to put a way to easily insert GIFs/images into a webpage like the way Discord inserts images by text (i.e. :gifname:).

I assume it processes some <textarea>‘s content and gets the name of the image, and then inserts it. How can I do this?

Can I do some sort of replace() insert abuse type thing, like:

Text.replace(":example:", "<img src='imagepath.png'>")


Using input or textarea tag are’t possible.

Because these elements can handle only plain text like Ascii, UTF-8, and others. Emoji works in it because is part of the Unicode system.

In that way, u can do this as Hermanboxcar said above, replacing an string with another.

The way Discord works are more complex because it handles events and sub-nodes in DOM (Document Object Model).

You could look for WYSIWYG, it’s the name of Discord’s text field are using.

I recommend you inspect Discord in the browser and try to type anything else. You will see that it works in another way as you no expect

Answered By – ayelsew

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published