Convert text links in a text area to clickable links

Written byPhuoc Nguyen

Created

05 Oct, 2023

When working with text areas, it's important to remember that they don't accept clickable links. That means any links you include will just look like regular text, making it hard for users to access the linked content. But don't worry, there's a solution! We need to convert these links to HTML anchor tags.

Converting raw text links to clickable links is crucial for web design and user experience. It makes it easy for users to access linked content without having to copy and paste the URL into a browser. By clicking on a clickable link, users can be directed to another page or website, providing additional information or resources related to the text area content. Plus, clickable links make the text area more readable by clearly distinguishing between plain text and linked content.

In this post, we'll learn how to implement this functionality using JavaScript.

#Converting plain text links to HTML anchor tags

Converting links found in plain text to clickable HTML anchor tags can be a daunting task, but with the Linkify library, it's a breeze.

To get started, simply include two scripts in the `<body>` tag:

html

<body>
    ...
    <script src="https://unpkg.com/linkifyjs@4.1.1/dist/linkify.min.js"></script>
    <script src="https://unpkg.com/linkify-string@4.1.1/dist/linkify-string.min.js"></script>
</body>

Once the Linkify library is available, you can easily convert links found in a text area with real HTML anchor tags. The `linkifyStr` function accepts two parameters. The first one is the raw text, and the second one is the options. In this example, the second parameter indicates that the links will be opened in a new tab:

const convertedLinks = linkifyStr(textarea.value, {
    target: '_blank',
});

With these simple steps, you can easily convert plain text links to clickable HTML anchor tags.

#Making anchors visible

Once we've converted the links in the text area, we can set the mirrored element's content accordingly:

const findLinks = () => {
    mirroredEle.innerHTML = linkifyStr(textarea.value, {
        target: '_blank',
    });
};

Next, we need to make the anchors visible to users. To achieve this, we have to set the `background` and `color` properties of the text area to transparent. Additionally, we need to set the `caret-color` property so users can see where the cursor is.

Here's the code to make the anchors visible:

css

.container__textarea {
    background: transparent;
    caret-color: rgb(0 0 0);
    color: transparent;
}

Now, if we follow these steps, the links will be displayed properly. However, you might notice that clicking on a link doesn't take us to the target website.

Don't worry, we'll fix that in the next section.

#Making anchors clickable

To fix the issue we discussed in the previous section, we need to make some changes. First, we'll reverse the order of the text area and the mirrored element. Instead of having the text area in front, we'll put it behind the mirrored element. Here's an example of what that looks like:

// Before
containerEle.prepend(mirroredEle);

// Now
containerEle.appendChild(mirroredEle);

Next, we need to make sure users can interact with the text area. To do this, we'll set the `pointer-events` property to `none`. This lets users update the contents of the text area without any issues. If we didn't set `pointer-events` to `none`, the mirrored element would capture all mouse events, making it impossible for users to edit their code or select text.

But we still want users to be able to click on the anchors inside the mirrored element. To make this possible, we'll reset the `pointer-events` property for the anchors:

css

.container__mirror {
    pointer-events: none;
}
.container__mirror a {
    pointer-events: auto;
}

Take a look at the final demo below to see how it all comes together.

If you found this post helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

Build a simple code editor←

Questions? 🙋

Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.

While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.

Ask me questions

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn