Retrieving host name in Angular 7 to dynamically generate image names

Question

Retrieving host name in Angular 7 to dynamically generate image names

I am looking for a way to retrieve the domain name from my video URL: {{video.url}}

The URL {{video.url}} contains various links such as:

https://domain1.com/123/abc
https://www.domain2.com/123/abc
http://www.domain3.com/123/abc
http://domain4.com/123/abc
https://www.domain5.com?123&abc
https://www.domain6.com/123/abc.html

I want to extract "domain1," "domain2," "domain3," and so on, in order to create an image name within my component.ts file:

return'https://mywebsite.com/img/'+domain+'.png';

The "/img/" directory will contain numerous images with names like youtube.png, google.png, and more.

In my angular component.html file, I intend to include:

<div class="video" *ngFor="let video of mediaItem.videos">
<img [src]="getIcon">
</div>

Now, my question is what code do I need to use in my component.ts file?

angular typescript

Answer 1

Answer №1

function extractDomain(url) {
  const domain = url.toLowerCase().replace(/https?:\/\//, '').split('.');
  return domain[0] === 'www' ? domain[1] : domain[0];
}

console.log(extractDomain('https://domain1.com/123/abc'));
console.log(extractDomain('https://www.domain2.com/123/abc'));
console.log(extractDomain('http://www.domain3.com/123/abc'));
console.log(extractDomain('http://domain4.com/123/abc'));
console.log(extractDomain('https://www.domain5.com?123&abc'));
console.log(extractDomain('https://www.domain6.com/123/abc.html'));

Answer 2

function extractDomain(url) {
  const domain = url.toLowerCase().replace(/https?:\/\//, '').split('.');
  return domain[0] === 'www' ? domain[1] : domain[0];
}

console.log(extractDomain('https://domain1.com/123/abc'));
console.log(extractDomain('https://www.domain2.com/123/abc'));
console.log(extractDomain('http://www.domain3.com/123/abc'));
console.log(extractDomain('http://domain4.com/123/abc'));
console.log(extractDomain('https://www.domain5.com?123&abc'));
console.log(extractDomain('https://www.domain6.com/123/abc.html'));

Retrieving host name in Angular 7 to dynamically generate image names

Answer №1

Similar questions

Encountering difficulty with retrieving information from a shared service on Angular 6

Sending information to components in Angular using Router

Is it possible to invoke a method using a jQuery id selector within an Angular 2 template?

Issue with unresolved module in ESLint

Is there a way to access the Angular directive instance from the console?

The concept of self-referencing in TypeScript

How can I detect a click event in Angular using Typescript?

Typescript navigation and Next.js technology

Tips for Embedding an External Website within an Angular Page without Using Web Elements

The Order ID field in the Serenity-Platform's Order Details tab is not registering orders

A tutorial on how to customize the hover effect for TableHead Column Identifiers in MaterialUI by adjusting

Tips for integrating a variety of components onto a single webpage

Why is my Angular app displaying outdated data from Firebase when navigating between pages?

Building Angular 2 - Generate Multiple Sections in HTML with the Click of a Button

Are undefined Static Properties an Issue in Mocked Classes? (Jest)

VPS mysteriously terminates TypeScript compilation process without any apparent error

Seeking a filterable data grid in Angular 2

The TypeScript function was anticipating one argument, however it received two instead

Leverage the instance mesh feature in react-three-fiber to easily display a gltf model across multiple instances

Interference of NestJS provider classes in separate event loops causing conflicts