Need help searching for website URLs (e.g. www.domain.com) within a document and converting them into clickable links? Here's how you can do it:
HTML:
Hey there, take a look at this link www.wikipedia.org and www.amazon.com!
JavaScript:
(function(){var text = document.body.innerHTML;/*apply regex replace => text*/})();
Output:
Hey there, take a look at this link <a href="www.wikipedia.org">www.wikipedia.org</a> and <a href="www.amazon.com">www.amazon.com</a>!
At the outset, it's important to differentiate between a hostname and a URL. For instance, www.domain.com is actually a hostname, not a complete URL.
<a href="www.domain.com">
This specific line of code will not function correctly as it will attempt to locate a file named www.domain with a .com extension relative to the existing page.
Highlighting hostnames can be quite challenging due to the wide range of possible variations that may exist. While you could potentially identify strings like ‘www.something.dot.separated.words’, this method isn't foolproof given that many websites do not include the www. prefix in their hostnames. It might be best to avoid attempting to highlight such hostnames altogether.
/\bhttps?:\/\/[^\s<>"`{}|\^\[\]\\]+/;
The pattern provided above offers a liberal approach for detecting HTTP URLs. Depending on your requirements, you may need to refine the pattern to exclude certain characters or verify legitimate URL endings such as periods or exclamation marks which are rarely part of a URL in practice.
If necessary, you could incorporate an alternative syntax that allows either standard URL patterns or the www.hostname structure.
When implementing your preferred matching pattern, it's crucial to apply it only to text nodes within the page rather than directly on the underlying HTML markup. Running the pattern on the innerHTML content can have detrimental effects including removing essential JavaScript references, events, or form data already present on the page.
Regular expressions are generally unreliable when handling HTML content. To circumvent this issue, leverage the browser's pre-parsed elements and text nodes instead of attempting to process HTML using regular expressions. Furthermore, refrain from modifying text inside <a> elements as it would disrupt existing links and possibly invalidate the HTML structure.
// Function to convert plain text URLs into clickable links
function addLinks(element) {
var urlpattern= /\bhttps?:\/\/[^\s<>"`{}|\^\[\]\\]+/g;
findTextExceptInLinks(element, urlpattern, function(node, match) {
node.splitText(match.index+match[0].length);
var a= document.createElement('a');
a.href= match[0];
a.appendChild(node.splitText(match.index));
node.parentNode.insertBefore(a, node.nextSibling);
});
}
// Recursively search for text within element nodes
// Avoid processing link elements
//
function findTextExceptInLinks(element, pattern, callback) {
for (var childi = element.childNodes.length; childi-- > 0;) {
var child = element.childNodes[childi];
if (child.nodeType === Node.ELEMENT_NODE) {
if (child.tagName.toLowerCase() !== 'a')
findTextExceptInLinks(child, pattern, callback);
} else if (child.nodeType === Node.TEXT_NODE) {
var matches = [];
var match;
while (match = pattern.exec(child.data))
matches.push(match);
for (var i = matches.length; i-- > 0;)
callback.call(window, child, matches[i]);
}
}
}
Although I haven't tried it myself, this seems to be a solid piece of code worth utilizing:
Utilizing the jQuery DataTables plugin with a JSF <h:dataTable>. The page contains 86 records. +++++++++++++++++++++++++++++++++++++ + SN. + Name + Email + +++++++++++++++++++++++++++++++++++++ + 1 + Name 1 + Email 1 + + ...
Is there an angular equivalent to the typeof operator in JavaScript that can detect variables not defined? I am specifically interested in the behavior of angular.isDefined() and how it differs from typeof. In the example below, the variable x is not Defin ...
Currently, I'm utilizing Next.js to develop a project for my portfolio. In order to manage the API, I decided to implement both Tanstack query and Axios. The issue arises when attempting to retrieve the data as an error surfaces. Oddly enough, while ...
I have a situation where I have an unordered list with a static number of list items (menu elements) that are rendered on the server side. I need to add some state-based logic to each list item, such as changing the color of the active item and expanding ...
I am in need of creating a 5-minute interval timer using react JS, with a 1-minute offset. The current timer I have functions like this: 1:00 => 1:05 => 1:10 => 1:15 => 1:20. However, I require it to be adjusted to display: 1:01 => 1:0 ...
Within my React Native application, I have implemented Moment.js and included the following code snippet: const expDate = moment(new Date(val)).format('MM-DD-YYYY'); const nowDate = moment().format('MM-DD-YYYY'); const diff = nowDate.d ...
I'm encountering an issue while attempting to draw on an HTML canvas. I've specified 50 circles and multiple lines within a canvas of size 1000x1000 px, but not all circles are appearing as expected. My assumption is that the elements are being ...
Here is the array I'm working with: const myArray = [{ id: 1, isSet: true }, { id: 2, isSet: false }, ...]; I only need to iterate over the isSet properties of the objects, ignoring all other properties. Initially, I attempted the following solution ...
Howdy everyone! I'm currently working on an app using Next.js. Every time I make a change, the server automatically compiles with the updates, but unfortunately, the pages often fail to render properly. Sometimes it takes several minutes for them to l ...
I am experiencing an issue with Firebase where it overrides my old pictures every time I upload a new picture. How can I configure it to save my old pictures as well? <!DOCTYPE html> <html> <head> <title>Firebase Storage< ...
I'm encountering an issue with testing this JavaScript code: $("#ShootBtn").on('click', () => foo.testFunc()); var foo = { testFunc: function() { hub.server.shoot(true, username, gameCode); } } For my testing framework, ...
I am working on a feature that involves three dropdown select boxes, each containing different sets of demographic attributes. My goal is to show a score based on the combination of selections made by the user. For example, if a user chooses Male, 18-24, A ...
Is there a way to merge object keys' values from JSON arrays based on their key? json1 = [ {key:'xyz', value:['a','b']}, {key:'pqrs', value:['x','y']} ] json2 = ...
I'm currently learning React.js and working on my very first app. As someone new to frontend development, I am aiming to have a header design similar to that of popular websites like StackOverflow or YouTube, where an image or icon is positioned just ...
Within my Firebase database, I have organized data into two Documents: "users" and "posts". Each post in the "posts" collection is linked to a specific user using their unique id from the "users" collection. My goal is to retrieve user data associated wi ...
Recently, I have been utilizing the datepicker component from vuejs-datepicker. However, I encountered an issue where upon form submission, the date and month switch places. For instance, 10/08/2018 (dd/MM/yyyy) eventually displays as 08/10/2018, leading ...
When working with the Twitter API, I need to make recursive method calls to retrieve tweets since each request only returns a maximum of 100 tweets. The process is straightforward: Call the function and await it Make an HTTP request and await that If the ...
I'm currently working on displaying data retrieved from my database using node.js, Express, and MongoDB. I successfully see the data in the console, but now I need to output it on the front-end using Jade. Here is the data I have retrieved: { date: ...
I recently acquired a .NET MVC sample application that came with Angular2-final. Within the project, I noticed a typings.json file at the root and a tsconfig.json file in the ng2 app directory. What is the connection between these two files? Is this the mo ...
Scrolling within inner div is not functioning properly in the Mozilla Firefox browser. However, it works seamlessly in Chrome. Is there a workaround for enabling scrolling in Firefox? Here is the fiddle link: http://jsfiddle.net/t6jd25x9/2/ body { f ...