如何编写一个函数来检测并替换加载的JSON中的URL？

我正在尝试编写一个函数，用一个按钮替换Json中的所有URL，该按钮指向另一个函数。加载的带有按钮的Json显示在我的网站上

在my component.ts中，检测到Json的部分如下所示：

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

有人知道我如何实现识别URL的代码，然后用一个按钮替换它们以实现其他功能吗

---

谢谢大家!

您可以创建一个管道来转换loadedJSON，如下所示和[innerHTML]属性绑定

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

从“@angular/core”导入{PipeTransform，Pipe}”；
从“@angular/platform browser”导入{domsanizer}”；
@烟斗({
名称：“转换URL”，
纯：假
})
导出类TransformURLPipe实现PipeTransform{
构造函数（受保护的消毒剂：DOMSANTIZER）{}
转换（值：任意）：任意{
如果（value.length==0）{
返回值；
}
返回this.sanitizer.bypassSecurityTrustHtml(
value.replace（/url:\//\//g，“测试”）
);
}
}

HTML

您可以创建一个管道来转换loadedJSON，如下所示和[innerHTML]属性绑定

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

从“@angular/core”导入{PipeTransform，Pipe}”；
从“@angular/platform browser”导入{domsanizer}”；
@烟斗({
名称：“转换URL”，
纯：假
})
导出类TransformURLPipe实现PipeTransform{
构造函数（受保护的消毒剂：DOMSANTIZER）{}
转换（值：任意）：任意{
如果（value.length==0）{
返回值；
}
返回this.sanitizer.bypassSecurityTrustHtml(
value.replace（/url:\//\//g，“测试”）
);
}
}

HTML

谢谢！它几乎起作用了！我只是有一个问题，第一个url得到一个按钮，其余的保持不变。你知道为什么会这样吗？另外，“propName”属性应该做什么？filterString，propName是另一个可选的aruguments，此转换不需要它。您必须修改正则表达式，以便在所有url（（/url:\/\//g）出现时应用按钮。更新了答案谢谢！它几乎可以工作！我的问题是，只有第一个url得到一个按钮，其余的保持不变。您知道为什么会这样吗？还有“propName”是什么属性应该做什么？filterString，propName是另一个可选的aruguments，此转换不需要它。您必须修改正则表达式以在url的所有出现（（/url:\//\//g）上应用该按钮。更新了答案

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>")
    );
  }
}

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