Find urls and make it clickable in reactJs/javascript

Question

I go through many stack-overflow questions but none of it works.

find URLs and on click open in new tab

let's say I've this string: this is google url click on it : www.google.com. On website instead of showing this string directly I want to find url from string and see as a clickable url.

like this : this is google url click on it : https://www.google.com/

what I've tried from my side is :

linkify("this is google url click on it : https://www.google.com/");

linkify = inputText => {
var replacedText, replacePattern1, replacePattern2, replacePattern3;

//URLs starting with http://, https://, or ftp://
replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
replacedText = inputText.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>');

//URLs starting with "www." (without // before it, or it'd re-link the ones done above).
replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$2</a>');

//Change email addresses to mailto:: links.
replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>');

return replacedText;


};

this code is peace of one of stack-overflow question.

result of this code is :

this is google url click on it : <a href="https://www.google.com/" target="_blank"> https://www.google.com/ </a>

But I need final output in this manner :

this is google url click on it : https://www.google.com/

I've tried anchorme.js but got same output.

steps to implement anchorme.js

import anchorme from 'anchorme';

anchorme("this is google url click on it : https://www.google.com/");

but output is same.Then tried linkify reactJs package this but it's return object and crash application.

**linkify implementation **

import Linkify from 'react-linkify';

<Linkify>this is google url click on it : https://www.google.com/ </Linkify>

it's output is big object with keys like props, keys etc.

Answer 1

found a solution using linkify.

import Linkify from 'react-linkify';

 <Linkify properties={{ target: '_blank', style: { color: 'blue' } }}>{message}/Linkify>

Answer 2

Use Linkify-react to make links clickable use the below syntax to customize links in your format

const componentDecorator = (href, text, key) => (
    <a className="linkify__text" href={href} key={key} target="_blank">
      {text}
    </a>
  );

<Linkify componentDecorator={componentDecorator}>
....
</Linkify>   
}

Answer 3

The following code worked for me

import React, { Component } from "react";

class App extends Component {
  render() {
    return (
      <div>
        this is google url click on it :{" "}
        <a href="https://www.google.com/" target="_blank">
          {" "}
          https://www.google.com/
        </a>
      </div>
    );
  }
}

export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

enter image description here

Answer 4

You can use react-anchorme:

import React from 'react'
import { Anchorme } from 'react-anchorme'

const SomeComponent = () => {
  return (
    <Anchorme>Lorem ipsum http://example.loc dolor sit amet</Anchorme>
  )
}

Answer 5

Properties Doesn't Work

properties is removed in latest linkify version so use it like this

<Linkify
    componentDecorator={(decoratedHref, decoratedText, key) => (
        <a target="blank" href={decoratedHref} key={key}>
            {decoratedText}
        </a>
    )}
>

See this for further reference https://github.com/tasti/react-linkify/issues/96#issuecomment-628472955