JavaScript

replace() to Convert URLs in the Page (Starting with http, https) into Links [JavaScript]

 

When creating web pages or blogs, URLs may be displayed as plain text and may not function as links. This can be an issue, especially if you have to create links manually, leading to potential omissions or errors in linking. To address this problem, I’ll show you how to use jQuery’s replace() method to automatically convert URLs (strings starting with http or https) into links on the page.

This article will explain the steps in detail, so you should be able to implement it easily. Additionally, using this method can improve the convenience of your web page.

Contents
  1. Setting Link Styles with CSS
  2. Using replace() to Convert URLs (Starting with http, https) into Links (a Tag) with JavaScript
  3. HTML Code Example
  4. Demo Page for URL Link Conversion (Starting with http, https)
  5. Summary

Setting Link Styles with CSS

First, use CSS to set the style of the links to enhance their appearance. The style of the links significantly affects the usability and readability of the page for the user. Use the following CSS code to style the links:

<style>
body {
    padding: 0;
    text-align: center;
    position: relative;
    margin: 0;
    height: 100%;
}
h1 {
    padding: 10px 0;
    font-size: 18px;
    line-height: 1.4em;
}
a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
.clWrap {
    width: 800px;
    margin: 0 auto;
}
.clWrapSub {
    width: 500px;
    margin: 0 auto;
    text-align: left;
}
</style>

This CSS code makes the link design simple and readable. It hides the underline of the a tag and shows the underline when hovering over it, indicating visually that the link is clickable. By setting the link color, you can give the page a consistent design.

Using replace() to Convert URLs (Starting with http, https) into Links (a Tag) with JavaScript

Let’s explore how to use jQuery to automatically convert URLs on the page into links. By using this method, you not only save the effort of creating links manually but also prevent forgetting to add links.

First, load the jQuery file jquery.min.js (v1.9.1).

Next, use the jQuery .replace() function to convert the URLs displayed on the page into links. Specifically, this process targets all the text within the body tag, searches for strings starting with http or https, and wraps them with an a tag.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
    $('body').html($('body').html().replace(exp, "<a href='$1' target='_blank'>$1</a>"));
});
</script>

This code uses a regular expression to detect URLs and automatically replaces them with a link tag. For example,

https://example.com

will be converted to:

<a href="https://example.com" target="_blank">https://example.com</a>

Adding the attribute:

target="_blank"

sets the link to open in a new tab when clicked.

HTML Code Example

Next, here’s an example of HTML code that includes URLs to be converted into links. You can use this code to check how the link conversion works in practice.

<div class="clWrap">

    <h1>Automatically convert URLs (starting with http, https) in the page into links.</h1>
    
    <div class="clWrapSub">

    <ul>
<li class="cat-item cat-item-36">https://dad-union.com/category/css</li>
<li class="cat-item cat-item-2">https://dad-union.com/category/javascript</li>
<li class="cat-item cat-item-3">https://dad-union.com/category/jquery</li>
<li class="cat-item cat-item-53">https://dad-union.com/category/php</li>
    </ul>

    </div><!--/clWrapSub-->
    
</div><!--/clWrap-->

In this example, the ul tag contains multiple li tags with URLs. When this HTML code is displayed on the page, the jQuery script automatically converts each URL into a link.

Demo Page for URL Link Conversion (Starting with http, https)

It is important to not only learn the theory but also see it in action. You can try the method introduced here by visiting the demo page via the following link:

Demo for URL Link Conversion (Starting with http, https) in the Page

On this demo page, you can check how URLs in the text are converted into links. Click on them to see if the links work correctly.

Summary

By using the method introduced here, you can automatically convert URLs displayed on web pages or blogs into functional links. This reduces the manual work of creating links and prevents omissions, thereby improving the usability of the page.

Even if you are not familiar with web page creation, you can easily implement this by following the steps introduced here. This method can also be easily applied to existing websites, so try it out right away.

Moreover, based on this method, you can try other text processing or link creation automation, enhancing your web development skills.

That’s the explanation of how to use jQuery to convert URLs on a page into links. Make sure to incorporate it into your website to improve its usability.

※ Please use at your own risk if you reuse this. Do not reuse the Google Analytics tag in the head tag of the demo page.

replace
RELATED POST