As a senior SEOER and a staunch advocate for user experience, I always find areas for improvement or simplification in practical operations and usage. Yesterday, while sharing the article "WordPress Automatically Adds Current Article Tags as Keyword Internal Links," I was thinking about redefining internal links in articles. If internal links can be automatically added, what about external links?
Many times, or most people do not add external links in articles for various reasons. So, even if they need to share other websites, they will only use text links. In other words, it looks like a link, but it cannot be clicked directly. You need to copy it to the browser address bar to access it. The reason is that friends who understand website optimization know that it is to prevent the export of weight. So, I can understand this point, and many times when I edit articles, I don't want to give other URLs hyperlinks.
Although I understand it from the perspective of webmasters and editors, it is very inconvenient for users. Today, I, Zifan, will solve this problem. Since it is about solving a problem, we need to know the reason behind it. In order to prevent the export of external links from the website itself, editors use text URLs. When search engines crawl, these text URLs will not be accessed by search engines. So, the solution to the problem of users not being able to click directly to access is to automatically add hyperlinks to these text URLs using JavaScript or jQuery. Because search engines themselves do not execute JavaScript, only when users visit, the JavaScript rendering function is used. This way, the article content obtained by search engines does not have hyperlinks for text URLs, but when users visit, they can click on the hyperlinks.
//jQuery automatically adds clickable hyperlinks to text URLs
var urlRegex = /(https?://)?([da-z.-]+).([a-z.]{2,6})([/?w.-=#%]*)*/g; //Regular expression for adapting to diverse URLs
$(".your-class-name *").not("a").addBack().contents().each(function() { //.your-class-name is the name of the element wrapping the article
if(this.nodeType === 3 && this.textContent.trim().length > 0) { //Non-empty text node
if ($(this).parents('a').length == 0) {//Check if the current text node is inside a link element
var newText = this.textContent.replace(urlRegex, function(match) {
var url = match.startsWith('http') ? match : 'http://' + match; //Check if the URL contains the http protocol prefix
return '<a href="' + url + '" target="_blank" rel="nofollow noopener">' + match + '</a>'; //Convert text URLs to hyperlinks
});
$(this).replaceWith(newText);
}
}
});
The core of this code is a regular expression, urlRegex, and a jQuery statement, which are used to match URLs and traverse DOM elements, respectively.
The regular expression "/(https?://)?([da-z.-]+).([a-z.]{2,6})([/?w.-=#%])/g" is used to match diverse URLs in the text. I have tested many different styles of URLs to ensure that it can adapt to as many URLs as possible. This expression can match URLs starting with http:// or https://, as well as URLs without these prefixes. For URLs without the http:// or https:// prefix, we will automatically add the http:// prefix.
Next, we use the jQuery statement $(".your-class-name *").not("a").addBack().contents().each() to traverse all child nodes under the specified class name "your-class-name". We check if each node is a text node, i.e., nodeType === 3, and exclude empty text nodes. .not("a") also excludes content that is already a hyperlink. If these conditions are met, we replace the URLs in the text using the replace method and update the original text node using the replaceWith method.
In the replace method, we generate a new hyperlink tag for the matched URL. If the URL does not have the http:// or https:// prefix, we will automatically add the http:// prefix. The generated hyperlink tag uses the target="_blank" attribute to open the link in a new browser tab. Of course, to better ensure that even if the search engine renders the page, it can automatically prevent search engine crawling, I also set the rel attribute of the link to nofollow.
Unless otherwise stated, all articles are original works of Zifan's Blog, and any form of reproduction is prohibited.
Article link: https://zhangzifan.com/jquery-add-text-url-link.html