Ensure that the <a> tag contains an absolute URL, disregarding the base URL

When working with my Angular app, I have set <base href="/foo/bar/"> and enabled html5 mode using

$locationProvider.html5Mode(true);

Now, I want to generate a list that looks like this:

<div ng-repeat="item in vm.items">
  <a ng-href="{{item}}" target="_blank">{{item}}</a>
  <a ng-href="{{item}}" download>{{item}}</a>
</div>

The items I have can be URLs such as:

['example1.com', 'www.example2.com', 'http://www.example3.com', 'https://www.example4.com'];

It currently works fine for example3 and example4, but how can I resolve the following issues:

  • example1.com - it gets redirected to
    http://localhost/foo/bar/example1.com
  • www.example2.com - it gets redirected to
    http://localhost/foo/bar/www.example2.com

I am looking for the best way to force the usage of absolute URLs. It needs to work with both http and https, as well as include the download attribute.

Answer №1

Yes, you can try using this snippet:

if (strpos($url, 'http') === false) {
  $url = 'http://' . $url;
}

This code will prepend http:// to any URLs that are missing it.

Answer №2

After careful consideration, I have opted for the following solution:

updateUrlLink(link) {
    return 'https://' + link.replace(/^.*:\/\//, '');
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Step-by-step guide on integrating Bulma page loader extension as a Vue component

Is there a way to integrate the Bulma-extension page-loader element as a Vue component in my project? I attempted to import page-loader.min.js and use it, but unfortunately, it didn't work as expected. <template> <div class="steps"> ...

Ajax requests that are delayed to the same URL with identical data

While waiting for the back end developers to add a "cancel all" function, which would cancel all tasks tracked by the system, I am trying to create a workaround by cancelling each task individually. The cancellation REST service requires an ID in the form ...

During the development of my project using the MERN Stack, I faced a challenge that needed to be

I recently ran into an issue while working on my MERN Stack project. The React app is running on port 3000 and the Express API on port 5000. The problem arose when I tried to add OAuth functionality using Redux, as I started getting an error message that ...

Using single quotation marks in Javascript

When the variable basis contains a single quotation mark, such as in "Father's Day", I encounter an issue where the tag is prematurely closed upon encountering the single quotation mark. 'success' : function(data) { div.innerHTML = &apo ...

The issue of CharAt not functioning correctly arises when used inside a table and input element within the

The Objective: Extract the first character from the input field and display it beside the input box in order to facilitate sorting. I am facing issues with jQuery data tables and am in search of an alternative solution. Potential Resolution: Use the charA ...

What is the process for retrieving an object from a node.js server using JSON.stringify() in a JavaScript file?

Looking to organize my code, I want to separate the JavaScript from my page and link it through a file instead of having it embedded within script tags. The issue arises when I receive a "SyntaxError: expected expression, got '<' " in Firefox ...

Fixed Navigation Menu on Top with Specific Width Size

Currently diving into the world of CSS and eagerly following a tutorial on creating a responsive menu for my website. Managed to get it up and running, but hit a few roadblocks along the way: The navigation menu seems to shrink in both desktop and mobile v ...

Managing User Sessions in Meteor

Is there a way to dynamically retrieve and set the pageTitle for my Meteor app using jQuery or any other method? I've attempted to achieve this by creating a session when a specific div class is present on the page, but it doesn't seem to be work ...

The function of window.location is not responsive when used in conjunction with an ajax

The main page redirect occurs in 2 scenarios: When the user clicks logout When the session expires Code for logout functionality: $("#logoutLink").click(Logout); function Logout() { $.post("Logout", { antiCSRF: '{{acsrf}}&apo ...

Developing a personalized Markdown-it extension for a Nuxt web app causes a Type Error while displaying in a web browser

I have been working on developing a Nuxt.js application utilizing markdown rendering with markdown-it. To achieve this, I created a custom plugin located in the "helpers" directory. nuxt.config.js ... modules: [ ..., '@nuxtjs/markdownit', ] ...

Is it possible to define multiple regular expressions for a single field using yup in a form validation?

My goal is to validate an input to only accept URLs in Google Maps format. There are three possible valid outputs for a Google Maps URL: (for Google Maps app) (I only want to focus on ) (when sharing directly from Google Maps) Currently, I am able to ...

Is there a way to incorporate HTML code into a fullCalendar 4 event title?

Is it possible to add HTML content to an event title using eventRender in FullCalendar version 4? document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new ...

Query the server for data and store it within the context using Next.js

My goal is to retrieve data from an API on the server-side and load it into React context for access by any component in my app. Despite trying various methods, I have yet to find a solution that meets all of my requirements. Some approaches I've expe ...

a reactjs beforeunload event listener was added but not properly removed

I am working on a React component that looks like this: import React, { PropTypes, Component } from 'react' class MyComponent extends Component { componentDidMount() { window.addEventListener("beforeunload", function (event) { ...

The journey of a JavaScript file within an iframe devoid of any src attribute

Consider this scenario: In a folder labeled /jscript, there are two files named my_js_file1.js and my_js_file2.js. I also have an /index.html page structured like this: <html> <head> <script type='text/javascript' sr ...

The identity of the provider remains a mystery: $$MapProvider

Encountered an issue with an Unknown provider: $$MapProvider <- $$Map <- $$animateQueue <- $animate <- $compile <- $$animateQueue Experiencing the Unknown $$MapProvider Error When Utilizing the 'angular-animate' Module The conten ...

open a popup window by invoking a JavaScript function within jVectorMap

Currently, I am dealing with jVectorMap and facing a challenge where I need to implement a modal that retrieves data from the database and displays the output within the modal. The aim is to trigger the modal using the following JavaScript function: onMa ...

Clicking on the LI element will automatically trigger a click event on the input radio button

Whenever I click on an li element, I want the corresponding radio input to be selected. However, when I try to do this, I'm seeing an error in the console log: Uncaught RangeError: Maximum call stack size exceeded How can I resolve this issue? Bel ...

"Implementing an Ajax request to loop through a JSON

I have received these results and now I want to display them in my view: val: {email: Array(1), first_name: Array(1)} email: Array(1) 0: "The email field is required." length: 1 __proto__: Array(0) first_name: Arra ...

Error: Unexpected token 'undefined' encountered, which is not recognized as a primary expression. This error occurs at column null within the expression [xx], beginning at [xx%]

When using my sorting function, it does not work properly if the column name contains a %. For instance, when columnName == "calldrop", my function works as expected. However, when columnName == "calldrop%", I encounter an error message that says: Syntax ...