design pattern advice on method of "injecting" html in React

Question

Say I have a ReactNode post:

const Post = (props:{content:string}) => {
  return(
    <div>
      {textProcessor(props.content)}
    </div>
  )
}

the role of textProcessor is to 1. to sanitize the text, and 2. to identify links and inject html to highlight them.

const textProcessor = (content:string) : React.ReactNode =>{
    let   sanitized : string = sanitizeHTML(content);
    const urlRegex : RegExp = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/g
    const urls : RegExpMatchArray | null = sanitized.match(urlRegex);

    urls?.forEach(url=>{
        sanitized = sanitized.replaceAll(url, `<a href='${url}' target='_blank'>${url}</a>`)
    })
    return <div className='formatted-content' dangerouslySetInnerHTML={{__html: sanitized}} />;
}

This "works" but it feels very imperative which is probably an anti-pattern when it comes to React. It also feels unsafe given that I am injecting html (I do sanitize beforehand, but feels like the React way is intended to be different). Is there another way of doing this which is more "React"?

regex parsing html? isnt there some advice about that somewhere? — Ewan
– Ewan, Commented Jan 28, 2023 at 23:40
I assume you're referring to this great meme that says to use an xml parser? stackoverflow.com/questions/1732348/… the difference is I am not searching/matching HTML, I am looking to inject or add HTML :) I do have one regex search for a URL but I believe that's less controversial — Leftover Salad
– Leftover Salad, Commented Jan 29, 2023 at 2:21
why are you setting the html here instead of just binding you list of urls to a react template? Im not sure i understand what you are doing — Ewan
– Ewan, Commented Jan 29, 2023 at 9:55
ahh ok. you are taking whatever html is in the div, parsing it, wrapping urls with anchor tags, and re writing it. I think the meme is www.relevant.! — Ewan
– Ewan, Commented Jan 29, 2023 at 9:57
the div basically contains a message that a user may write. There's no HTML in it. However, if the user pastes in a link, I would like the link to be wrapped in an anchor tag. So it just parses the string for URLs, then adds anchor tags to them. — Leftover Salad
– Leftover Salad, Commented Jan 30, 2023 at 1:23

Ewan · Accepted Answer · 2023-01-29 10:06:14Z

I'm going to say 'no' there is no 'react'y way of doing it.

Essentially react wants to bind an object model to a template. But here you don't have an object model, just a string.

Even after processing it, you still just have a string. What you would want is an object which has the text plus a list of links with some way of linking the link back to a specific range of text in the text.

You could then bind that model, which would be complicated, to a template which would allow you to specify that the links would be in anchor or div or span or whatever HTML tag.

But you can see that this would be difficult, and probably not worth the effort.

For example, maybe you could have a list of Word objects, each with a property IsLink

Stack Exchange Network

design pattern advice on method of "injecting" html in React

1 Answer 1

Your Answer

Hot Network Questions

design pattern advice on method of "injecting" html in React

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions