CODEWITHSUNDEEP
reactjs
Peter
Peter

Reputation: 43

How can I do to make clickable an url in a string?

Hello I have that code :

import "./styles.css";
import React, { useState } from 'react';

const App = () => {
  const [myString, setMyString] = useState("Hello I use https://www.google.com/")
  return (
    <div className="App">
      <h1>{myString}</h1>
    </div>
  );
}

export default App;

This link https://www.google.com/ is not clickable, you can see that here :

The full project

How can I do to make it clickable ?

Upvotes: 3

Views: 888

Answers (3)

kennarddh
kennarddh

Reputation: 2665

Since url can't contains space, you can split the string by space and use regex to validate url

Add count prefix to link key because if same links occur key duplicate error is thrown

const urlRegex = /https?:\/\/(.\.?)+\..+/

const ReplaceURL = (str) => {
  const texts = str.split(' ')
    .reduce((acc, text)=>{
      if (urlRegex.test(text)){
        acc.array.push(acc.text)
        acc.urls.push(text)
        acc.text = ''
        
        return acc
      }
  
      acc.text += ` ${text} `
      
      return acc
    }, {array:[], urls:[], text:''})
  
  if (texts.text)
    texts.array.push(texts.text)
    
  const duplicateLinksCount = {}
    
  const links = texts.urls.map((url)=>{
    if (!duplicateLinksCount[url]) duplicateLinksCount[url] = 0
    
    duplicateLinksCount[url] += 1
    
    const key = `${duplicateLinksCount[url]}_${url}`
    
    return <a href={url} key={key}>{url}</a>
  })
    
  const merged = []
  
  for (let i = 0; i < texts.array.length; i+=1){
    merged.push(texts.array[i])
    if (links[i]) merged.push(links[i])
  }
  
  return merged
}
      
      
const App = () => {
  const [myString, setMyString] = React.useState("Hello I use https://www.google.com/ url: http://example.com same url http://example.com")
  return (
    <div className="App">
      <h1>{ReplaceURL(myString)}</h1>
    </div>
  );
}
const domNode = document.getElementById('root');
const root = ReactDOM.createRoot(domNode);
root.render(<App />);
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="root"></div>

Upvotes: 3

Mubo
Mubo

Reputation: 1070

Although I am not confessed why you have to use State for this. But you can achieve your desired result by doing the following.

import "./styles.css";
import React, { useState } from 'react';

const App = () => {
  const [myString, setMyString] = useState("Hello I use https://www.google.com/"); 
  
  let result = myString.split(' ');
  const URL  = result[3];
 
  return (
    <div className="App">
      <h1> <a href={URL}> {URL}</a></h1>
    </div>
  );
}

export default App;

Upvotes: 0

codecombs
codecombs

Reputation: 13

You have to wrap your link in an anchor tag and set the href attribute to its relative address.

import "./styles.css";

export default function App() {
  const link = "https://www.google.com";
  const myString = "Hello I use ";
  return (
    <div className="App">
      <h1>Hello CodeSandbox </h1>
      <h2>
        {myString}
        <a href={link}>{link}</a>.
      </h2>
    </div>
  );
}

Upvotes: 0

Related Questions