0

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"?

5
  • 1
    regex parsing html? isnt there some advice about that somewhere?
    – Ewan
    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 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
    Jan 29, 2023 at 9:55
  • 2
    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
    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. Jan 30, 2023 at 1:23

1 Answer 1

2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.