How to remove html tags from string in react js

Posted Mahedi Hasan Category JavaScript Published June 15, 2021

Hello devs in this example i am going to share the source code of how you can remove html tag from your string. So in this javascript strip html tag example code tutorial you will learn javascript remove html tags from string regex.

If you don't know that way of removing html tags from string javascript then this tutorial is for you. We can do it many ways but i am going to share the most and very easy way using a single line of code with regex.

Example code:

Comments

1. Your script works great! Cheers!

2. this is so cool , i like it

3. function strip[html]
   {
   var tmp = document.createElement["DIV"];
   tmp.innerHTML = html;
   return tmp.textContent || tmp.innerText;
   }

   • This was even better for my needs. No issues with special characters etc…

   • That is awful advice!

     If for some reason [like malicious intent of users] the html argument contains a script tag, you’ve now opened up for XSS attacks!!!

     Don’t use the DOM for something that doesn’t require it.

     Also, the DOM is really slow.

   • This solution is great for using of inner content from paragraph in JS Alert window – it strips nbsp and em efectivelly,
     thanks

   • Pushpinder,
     Lovely. Worked great

   • If you don’t need to support IE6, maybe try using the DOMParser directly as it won’t download images nor execute scripts:

     function stripHtml[dirtyString] {
       const doc = new DOMParser[].parseFromString[dirtyString, 'text/html'];
       return doc.body.textContent || '';
     }
     

     Now if you run something like stripHtml["/ig,””];

   • Hi :]

     I saw your contact form and i must say i love it!
Do you have a tutorial or something like that? It’s a wonderful one :]^
Hope to hear some news of you,

     A french reader,

     Florian

   • Thank for script :]

     @Ricard: If you want to make a copy of the contact form, just view source or save this page to you local ;]

   • beautul site thank you for great example

   • the /i for case insensitivity is definitely recommended.
When using contenteditable, IE produces upper case tags, mozilla would only create lower case… To strip those you need it case insensitive.

     • DScout, this is incorrect. There are no specified alphabetical characters in the regular expression – the case insensitivity modifier therefore affects nothing.

   • Hi

     I have following code:

     var text = ‘[$ ssIncludeXml[docName,”wcm:root/wcm:element[@name=’innerpage_content’]/text[]”] $]’;
var StrippedString = text.replace[/[]+]>]/ig,””];

     where ‘[$ ssIncludeXml[docName,”wcm:root/wcm:element[@name=’innerpage_content’]/text[]”] $]’
is Idoc script that brings a block of HTML from a placeholder. But i am getting “unterminated string literal” Error at first line.

     What i want to do is to remove or strip all HTML tags and to get plain text out of that markup.

     Kindly let me know if there is any solution.

     Thanks

   • works great but doest strip whitespaces….  

   • Thank you! It was very useful for me and I think that is useful for everyone.
Thank you again!

   • Yeah, this solution removed all sorts of HTML, paragraph, line breaks, in-line styles etc etc

   • This does not works for IE. Please provide solution to strip tag in javascript that works for all browsers

   • Thanks for this script
It work greate

   • i am trying it on

     var message;

         firstName = document.getElementById["username"].value;
     
         if [firstName == null || firstName == "" || firstName == NaN || firstName == "First Name"] {
             message = "Please Add some name.";
             document.body.insertAdjacentHTML["BeforeEnd", "" + message + ""];
         }
         else {
             if [document.getElementById["myMessage"]] {
                 debugger;
                 arguments = document.getElementById["myMessage"].value.replace[/[]+]>]/ig, ""];
             }
         }
     

     but it is not working and saying

     cannot call method ‘replace’ of undefined

   • Was wondering how this would be implemented if I only wanted to remove the href tags from a string of text, instead of removing all the tags? I’m trying to retrieve a page of text from a website but I only want the plain text with the formatting tags [p, ul, li].
Hope this makes sense, thanks in advance.

   • This was excellent! Thanks!

   • your “\S” is missing… or not?

     /[]+]>]/ig
     

     • \S means not whitespace, and ^> means not greater than, so your modified regex only ensures that single character tags will not be replaced.

   • Thanks,
Its working fine.

   • Cool! This is perfectly working…

   • What about < b r / > or < h r / > [the self closing tags] ?

   • Looks like “newInput” doesn’t do anything at all? So it’s either extraneous or there’s a problem with the code.

   • I have developed same thing using javascript Regular Expression.
It’ll strip all the html tags excluding tag provided in exclude list by user.
source code is also available on github
check here. HTML Tag Stripper

   • Nice, but it’s not that safe… I’d rather use jQuery:

     $["

     "].text[''].text[];

   • document.body.innerText

     b”> ~ fail

   • But this code is not working well with HTML table content.

   • How can strip all tags except anchor and img tags?

   • You can easily leave out the case sensitivity /i and the grouping []:

     var noHtml = hasHtml.replace[/]+>/ig, '']
     

   • using jQuery
jQuery[stringWithTags].text[]

   • jQuery[stringWithTags].text[];
it is what i want. tanx…

   • not working with AngularJS.

   • Mohammad Mustafa Ahmedzai

     Probably the simplest probably I found online. Thanks a bunch for it. Worked just fine!

   • string.replace[/\n/g, ""];
     string.replace[/[\t ]+\[\t ]+\[\t ]+$/g, ">"];
     

   • Doesn’t anyone see how this solution greatly affects this text:

     Rounded amounts < 3 are way easier for people to use in calculations, since they are so tiny than numbers that are >=3

     Becomes: Rounded amounts =3

     • This one is better; phpjs.org/functions/strip_tags/

   • Safe way to use the DOM to strip html.

     function striptags[content] {
       var frag = document.createDocumentFragment[];
       var innerEl = document.createElement['div'];
       frag.appendChild[innerEl];
       innerEl.innerHTML = content;
       return frag.firstChild.innerText;
     }
     striptags['alert["xss attack!"]'];
     

   • I chucked together a function that allows some tags to be kept, similar to how the php function works.

     As with PHP it comes with the following two caveats:

     Because strip_tags[] does not actually validate the HTML, partial or broken tags can result in the removal of more text/data than expected.

     and

     This function does not modify any attributes on the tags that you allow using allowable_tags, including the style and onmouseover attributes that a mischievous user may abuse when posting text that will be shown to other users.

     /**
      * Native javascript function to emulate the PHP function strip_tags.
      * 
      * @param {string} str The original HTML string to filter.
      * @param {array|string} allowable_tags A tag name or array of tag
      * names to keep. Intergers, objects, and strings that don't follow the
      * standard tag format of a letter followed by numbers and letters will
      * be ignored. This means that invalid tags will also be removed.
      * @return {string} The filtered HTML string.
      */
     function strip_tags[str, allowable_tags] {
         allowable_tags = [].concat[allowable_tags];
         var keep = '';
         allowable_tags.forEach[function[tag] {
             if [['' + tag].match[/^[a-z][a-z0-9]+$/i]]
                 keep += [keep.length ? '|' : ''] + tag;
         } ];
         return str.replace[new RegExp[']+>', 'ig'], ''];
     }
     

     Additional checks have been implemented to prevent invalid tags from being removed where possible, by ensuring that the opening of each tag starts with a potential tag name; it does not account for greater than symbols within attributes. Comments will be retained but can be removed with a similar regex.

     var no_comments = strip_tags['This is not a comment. '].replace[//, ''];
     

     • Hi!

       I hate to bother you, but it looks like the last line of your function has been corrupted somehow – that’s not a valid Regex. Any chance you could fix it?

   • Hi guys! I am currently facing a javascript problem with the regex / replace function you mention here.
I would like to bring a text around some of its HTML tags.

     For this I use the function:

     var regex = / [] +]>] / ig;
     bodyValue = bodyValue.replace [regex, ""];
     

     Here all tags are deleted.

     But I want to keep the and tags and found these two separate functions that worked for me:

                                    var regex = / ] *> / gi; // deletes all HTML except
     
     
                                    var regex = / ] +> / gi; // deletes all HTML except for 
     

     Do you know how to combine the two conditions in one?

   • This not only removes the offending characters, but also the rest of the text.

     • What’s the HTML you’re working with?

   • Why don’t you use Element.textContent?

   • Just what I needed…Thanks

   • .replace[/[ ]+]>]/ig, ""]
added a space after the chevron to allow for things like: “< heey >”

   • Another tip: use the browser’s ability to remove tags:

     const fakeDiv = document.createElement["div"];
     fakeDiv.innerHTML = html;
     document.getElementById["stripped"].innerHTML = fakeDiv.textContent || fakeDiv.innerText || "";
     

   • Hello sir. Please I wish to know if I can get help from you.
I have a frontend submission which users can share their article but will want to remove every link on the form.
Is there a way to do this only for the post submitted by users who are not admin?
Thanks
I already have the frontend post set and it works properly except what I am seeking for help.

Leave a Reply