What is the best way to create a function that can identify and change URLs within a JSON file?

Question

What is the best way to create a function that can identify and change URLs within a JSON file?

I'm currently working on a function that will replace all URLs in a JSON with buttons that redirect to another function. The modified JSON, complete with the new buttons, will then be displayed on my website.

In my component.ts file, the section where the JSON is processed looks like this:

} else {
  this.downloading = false;
  this.container = <aContainer>json;
  this.loadedJson = JSON.stringify(json, null, 2);

Once the JSON is loaded, it is rendered on the website using the following code snippet in the component.html file:

<h3>Unrecognized JSON data:</h3>
<pre>{{loadedJson}}</pre>

I am considering using a regular expression (regExp) to identify and replace URLs within the JSON data, replacing them with 'url://'.

let regExp = /url:\/\//

Does anyone have suggestions on how I can create code that detects URLs and replaces them with buttons that link to another function?

Thank you for your help!

json angular typescript button

Answer 1

Answer №1

To manipulate the loadedJSON, you can implement a custom pipe and utilize property binding for innerHTML.

import { PipeTransform, Pipe } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";

@Pipe({
  name: "transformURL",
  pure: false
})
export class TransformURLPipe implements PipeTransform {
  constructor(protected sanitizer: DomSanitizer) { }

  transform(value: any): any {
    if (value.length === 0) {
      return value;
    }
    return this.sanitizer.bypassSecurityTrustHtml(
      value.replace(/url:\/\//g, "<button type='button'>Test</button>")
    );
  }
}

HTML

<p [innerHTML]=" loadedJSON | transformURL"></p>

Answer 2

To manipulate the loadedJSON, you can implement a custom pipe and utilize property binding for innerHTML.

import { PipeTransform, Pipe } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";

@Pipe({
  name: "transformURL",
  pure: false
})
export class TransformURLPipe implements PipeTransform {
  constructor(protected sanitizer: DomSanitizer) { }

  transform(value: any): any {
    if (value.length === 0) {
      return value;
    }
    return this.sanitizer.bypassSecurityTrustHtml(
      value.replace(/url:\/\//g, "<button type='button'>Test</button>")
    );
  }
}

HTML

<p [innerHTML]=" loadedJSON | transformURL"></p>

What is the best way to create a function that can identify and change URLs within a JSON file?

Answer №1

Similar questions

Ways to boost the efficiency of your Ionic 4 app development process

Material-UI Slide component is encountering an issue where it is unable to access the style property of an undefined variable

Help! My Angular CLI version 8.2.2 is displaying squares instead of the Font-awesome icons

Accessing a specific data point from a Rest Api with React JS

Angular 11 now includes the ability to implement lazy loading for modules

Explanation on retrieving JSON data from a ListView and passing it to another activity using SQLite in Android Studio

ESLint detecting error with returning values in async arrow functions

PrimeNG Component Containing a Dynamic Dialog Instance

Deactivate the chosen tab by clicking the Mat-Tab button

Definition of TypeScript type representing the value of a key within an object

I'm on the lookout for a component similar to angular-ui-tree that is compatible with angular

How can you enhance a component by including additional props alongside an existing onClick function?

Hide the value of a specific key in a JSON object

Can we extract unique values from a JSONObject in Java?

Having trouble accessing props on children in TypeScript while using React.Children.toArray?

Tips for setting a default value in a generic function in TypeScript, where the default argument's type is determined by the generic parameter

Reducing the size of XML files in ASP.NET 3.5 returned from WebMethods: Available solutions

Page Breaks - Patience in anticipation of dataSource readiness

Alternating the main access point from a separate module

Exploring the MEAN Stack for a Fresh Take on Single Page Application Development