<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.14.7/babel.min.js"></script>
<script type="text/babel">
// Regular expression to match URLs
const text = "Visit Google at https://www.google.com. " +
"Connect with friends on Facebook at https://www.facebook.com. " +
"Network with professionals on LinkedIn at https://www.linkedin.com. " +
"Explore ChatGPT at https://www.chatgpt.com. " +
"Shop for electronics at https://www.amazon.com. " +
"Get the latest fashion trends at https://www.zara.com. " +
"Discover world news at https://www.bbc.com. " +
"Learn about space exploration at https://www.nasa.gov.";
const urlRegex = /(https?:\/\/[^\s]+)/g;
// Split the text into parts containing URLs and other text
const parts = text.split(urlRegex);
// Map the parts to create a mixed array of text and links
const formattedText = parts.map((part, index) => {
if (part.match(urlRegex)) {
// If the part is a URL, convert it to a clickable link
<a key={index} href={part} target="_blank" rel="noopener noreferrer">
// If it's regular text, just display it as-is
return <span key={index}>{part}</span>;
<div className='container'>
<h3>React Js Detect URLs in Text and Convert to link</h3>
ReactDOM.render(<App />, document.getElementById("app"));
font-family: Arial, sans-serif;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
text-decoration: underline;