As a senior SEOER and a seeker of the ultimate user experience, I always find areas for improvement or simplification in practical operations and usage. Yesterday, when 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, so even if they need to share other websites, they will only use text links. In short, it looks like a link, but it cannot be clicked directly. It needs to be copied to the browser address bar to access. The reason is that friends who know website optimization know that it is to prevent exporting weight. So I can understand this point, and I often don't want to give other URLs hyperlinks when editing articles.
Although I understand it from the perspective of webmasters and editors, it is very inconvenient for users. Today, I'm going to solve this problem. Since it is to solve the problem, we need to know the reason. In order not to export external links from the website itself, editors use text URLs. When search engines crawl, these text URLs will not be accessed by search engines. The solution to the problem that users cannot directly click 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. In this way, the article content obtained by the search engine does not have hyperlinks for text URLs, but when users visit, they can click on the hyperlinks.
// Automatically add clickable hyperlinks to text URLs using jQuery
var urlRegex = /(https?://)?([a-z\d.-]+)\.([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 URL to hyperlink
});
$(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?://)?([a-z\d.-]+).([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, that is, 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, in order to better ensure that even if the search engine renders the page, it can automatically prevent the search engine from crawling, I also set the rel attribute of the link to nofollow.
Unless otherwise stated, all articles are original articles from Tearsnow Blog, and any form of reprinting is prohibited.
Article link: https://zhangzifan.com/jquery-add-text-url-link.html