Ignore attribute when attribute content is invalid #141

Activity

1. remarkablemark commented on Mar 4, 2020

   

   remarkablemark

   on Mar 4, 2020

   Owner

   More actions

   This sounds like invalid CSS in your HTML. See 'The parser throws an error'.
2. remarkablemark commented on Mar 4, 2020

   

   remarkablemark

   on Mar 4, 2020

   Owner

   More actions

   This is related to #125
3. shiglet commented on Mar 4, 2020

   

   shiglet

   on Mar 4, 2020

   Last edited by shiglet

   Author

   More actions

   Hello,

   Thank you for your answer. I had already seen this issues. Unfortunately, i can't use sanitize-html, the reason is that i need to keep valid styling, and remove them only when it's invalid.

   Is there any way to remove that with sanitize-html or another library ? I don't really know how can i actually know in javascript if the given style is actually valid or not. I know it's not related to html-react-parser, but i could actually use the html-react-parser replace method to remove that style attribute as long as i know how to be sure that the style is valid or not.

   EDIT: Maybe should i need to edit (in local) the inline-style-parser to return null instead of throwing that "missing ':'" error when the attribute content isn't valid ?

   Thank you.
4. remarkablemark commented on Mar 10, 2020

   

   remarkablemark

   on Mar 10, 2020

   Owner

   More actions

   Since the library uses style-to-object under the hood (to parse inline style attribute into an object), you can wrap the style parsing in a try-catch:

   const parse = require('html-react-parser');
   const { domToReact } = parse;
   const style = require('style-to-object');
   
   parse('<hr style="/*">', {
     replace: domNode => {
       if (domNode.attribs && domNode.attribs.style) {
         try {
           style(domNode.attribs.style);
         } catch (error) {
           // delete the attribute that's causing the error
           // then convert the dom node to react
           delete domNode.attribs.style;
           return domToReact(domNode);
         }
       }
     },
   });

   See Repl.it example.

   👍React with 👍5Reacted by Messaoudi Sadik, ZigZagT, Berkut Karlibay, e-m-d-o and DevTridhaya
5. remarkablemark

   added

   questionFurther information is requestedFurther information is requested

   on Mar 10, 2020
6. shiglet

   closed this as completedon Mar 10, 2020
7. ZigZagT commented on Mar 21, 2020

   

   ZigZagT

   on Mar 21, 2020

   More actions

   Thank you @remarkablemark . I also struggle with this issue for quite a long time. Very appreciate for the solution!
8. remarkablemark commented on Mar 21, 2020

   

   remarkablemark

   on Mar 21, 2020

   Last edited by remarkablemark

   Owner

   More actions

   You're very welcome