score:-1

use string#replace. a basic regex to find urls and then use a callback to wrap the link in an <a>

const test = {
  paragraphs: [
    'text of paragraph a text http://google.com',
    'text of paragraph b text text',
    'text of paragraph http://www.yahoo.com b text text',
    'text http://google.com of paragraph http://www.yahoo.com b text text',
  ]
};

const res = test.paragraphs.map(p=>{
   return `<p>${p.replace(/http(s)?\:\/\/(www.)?[a-za-z]+\.[a-z]+/g, (link)=>`<a href="${link}">${link}</a>`)}</p>`;
   
});

document.body.innerhtml = res.join("");

score:0

this is an example of how to convert your string to html in an reactjs application

class app extends react.component {

constructor() {
    super();
    this.state = {
      description: '<a href={to} target="_blank" {...rest}>{children}</a>'
    }
  }

  render() {
    return (
      <div dangerouslysetinnerhtml={{ __html: this.state.description }} />
    );
  }
}

reactdom.render(<app />, document.getelementbyid('root'));

score:0

react don't transform your string automatically to jsx element, it's renderer as is.

so react allow your to inject your html code inside a html component with dangerouslysetinnerhtml props. at your own risk :)

see the docs here

render() {
    return (
        <div dangerouslysetinnerhtml={{ __html: '<p>this is dangerous</p>' }} />
    );
}

Related Query

More Query from same tag