How to retrieve a value from a base64-decoded string in Angular 6?

I successfully decoded a Base64 string using the xml2js library and obtained the following XML value:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="293" height="102"
 viewBox="0 0 293 102"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  version="1.2" baseProfile="tiny">
<image 
width="293" 
height="102" 
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANS......pASYAAAAASUVORK5CYII=" />
</svg>

I had to truncate the encoded value due to its length.

However, I am facing an issue in retrieving the value of xlink:href attribute. Are there any techniques or libraries that can help me extract this specific value?

In other words, my goal is to extract only this value: 

data:image/png;base64,iVBORw0KGgoAAAANS......pASYAAAAASUVORK5CYII=

Your assistance is greatly appreciated.

angulartypescriptbase64

Answer №1

If you want to parse an XML string, you can utilize the DOMParser method. This allows you to manipulate the resulting Document just like any other:

const xmlStr = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="293" height="102"
 viewBox="0 0 293 102"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  version="1.2" baseProfile="tiny">
<image 
width="293" 
height="102" 
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANS......pASYAAAAASUVORK5CYII=" />
</svg>`;

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlStr, 'application/xml');
const imgElement = xmlDoc.getElementsByTagName('image')[0];
const hrefAttribute = imgElement.getAttribute('xlink:href');
console.log(hrefAttribute);

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

Error in typing on a prismic application utilizing a ContentRelationshipField

I am facing a type error in my Prismic Next.js application that I am struggling to resolve. While the app functions properly, I keep encountering type errors like the following: The property 'data' does not exist on the type 'ContentRelati ...

javascripttypescriptnext.jstypingprismic.io

What are the steps to resolve the issue of assigning void type to type ((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined in a react application?

I'm trying to update the state isOpen to true or false when clicking on a div element, but I keep getting an error with the following code: function Parent() { const [isOpen, setIsOpen] = React.useState(false); return ( <Wrapper> ...

reactjstypescript

What methods can be used to obtain download statistics for an Angular2 npm package?

Currently working on a presentation for an upcoming conference and faced with a bit of confusion... I'm having trouble locating the download statistics for the angular2 npm package! I've been looking here but unfortunately, there doesn't se ...

angulardownloadnpm

Printing problems with Angular POS software

Looking for a way to bypass print preview in Angular 6. I came across this interesting solution: Angular 2 Raw Printing Service Currently utilizing this link for printing in Angular POS. Are there any other options available? .ts code printInvoice() ...

angularrsvp.jsrsvp-promise

Although everything appears to be running smoothly in Express, my request is returning null

I am facing an issue with a router in my code. In the main index.ts file, I have the following line: app.use("/api/tshirts", tshirts) And in tshirts.ts file, I have defined the following routes: router.get("/", tshirtsController.getTShirts) router.get("/ ...

javascriptnode.jstypescriptexpress

Issue with handling http errors and navigating routes in Angular 2

Whenever I check a user's token authentication and encounter a 401 error, I aim to redirect them to the login page. The issue arises when attempting to navigate to the login page within the error catch block. constructor(private http: Http , private ...

angularhttprouterhandleerror

What is the reason for IE displaying null when the model does not exist?

Why does IE 11 render 'null' if my model does not exist? For instance: <tr> <td [innerHTML]="model?.prop1 | my-pipe"></td> </tr> Imagine this scenario: When the page loads, a request is sent to the server and the res ...

javascriptangulartypescript

Angular project facing issues during Maven build process

Hi there, I'm currently facing some challenges while trying to deploy my Angular and Spring Boot application. Whenever I run the command mvn clean compile spring-boot:run, I encounter a build failure from my Angular pom file. The error message I am r ...

angulartypescriptmavenfrontend-maven-plugin

The file isn't located in 'rootDir', even though all the details seem to be accurate

I'm currently troubleshooting an issue with one package in my nx monorepo that is causing the error code "TS6059". Interestingly, all other packages are functioning correctly in previous builds. After reviewing my index.ts files, it appears that all ...

node.jstypescriptnestjs

Transitioning from AngularJS to Angular 2: Exploring Alternatives to $rootScope.$on

Our journey with the AngularJS project has begun on the path towards the modern Angular. The ngMigration utility advised me to eliminate all dependencies on $rootScope since Angular does not have a concept similar to $rootScope. While this is straightforw ...

javascriptangularjsangularangularjs-rootscope

Guide to adding a loading spinner into your Angular project

I've been attempting to incorporate a spinner into my application, but unfortunately, the spinner isn't showing up. Despite checking the console and terminal for errors, there doesn't seem to be any indication as to why the spinner is not a ...

angulartypescriptprogress-barangular-material

Element not chosen in Angular version 6

Recently delving into Angular 6, I've been working on setting up form validation within an Angular form. Validation has been successfully implemented, but there's a minor issue with the select box displaying an empty first value. Here is my code ...

javascriptangular

The attribute 'map' is not found on the object of type 'List'

I am currently working on a project that involves lists, each with its own title. However, while using Map, I encountered the following error: Property 'map' does not exist on type 'List' Any suggestions on how to resolve this issue? ...

reactjstypescriptmaterial-ui

Error message: The class heritage events_1.EventEmitter is invalid and cannot be recognized

There seems to be a problem with the [email protected] npm dependency. I am attempting to incorporate mongodb into my Vue.js + Vite + Typescript application, but it crashes and fails to load due to an error originating from mongodb. It appears that th ...

typescriptmongodbvuejs3vite

What are the downsides of utilizing a global function over a private static method in Typescript?

It's quite frustrating to have to write this.myMethod() or ClassName.myMethod() instead of just myMethod(). Especially when dealing with a stateless utility function that doesn't need direct access to fields. Take a look at this example: functi ...

typescriptclassmethodsstatic

Failed to set the reference: The first argument includes an undefined property. This error occurred within the context of

My journey with Firebase began just 4 days ago, although I've been a bit inconsistent. My goal was to create a user in the database, and while the user was successfully created, I encountered an issue when trying to return to the profile picture page. ...

angularfirebasefirebase-realtime-databaseionic3failed-to-connect

Performing an RxJS loop to retrieve the httpGet response, followed by executing httpPut and httpPost requests based

I am currently working on a UI form that allows users to update or add translation text. To achieve this, I need to create an rxjs statement that will perform the following tasks: Send an httpGet request to the database to retrieve translations in mult ...

javascripttypescriptrxjs

CDK Error: Unable to locate MethodResponse in AWS API Gateway configuration

I'm facing an issue in vscode while trying to access the MethodResponse interface from apigateway. Unfortunately, I'm getting an error message: The type 'typeof import(".../node_modules/aws-cdk-lib/aws-apigateway/index")' d ...

typescriptamazon-web-servicesaws-api-gatewayaws-cdk

BaQend is all set to go as it initializes, just make sure to verify the user's login

Currently, I am utilizing BaQend and Ionic2 to implement certain tasks at the start of my application. 1. Database Readiness Instead of repeating this process on every page: ionViewCanEnter(): Promise<baqend> { // Verify Baqend SDK readine ...

angulartypescriptionic-frameworkapp-startupbaqend

Getting permission for geoLocation service on iOS in Ionic: A step-by-step guide

I have recently developed a social media application that utilizes geoLocation services. The app is built with Ionic 4 and has a Firebase backend. While the GeoLocation services are functioning properly on Android devices, users of iOS are not being prompt ...

typescriptfirebasecordovageolocationionic4