Javascript 如何删除/检查Angular JS 11中动态加载的html中的锚定标记

所以我对这个社区是新手（很长时间了）。我正在通过chromium浏览器（kiosk模式）使用Angular JS开发一个kiosk应用程序。我的问题是，我需要包括一些语言的隐私和服务条款（ToS）页面，这些页面可能有不需要的链接。我所拥有的不是为各种语言构建组件/页面，而是一个调用api/服务的隐私页面，以及每种语言的一组html格式文件（这些文件可能来自营销/法律团队，他们可能会从公司网站上获取，而不删除链接）。api本质上是为相应的语言提取/提供html/body文件

有趣的是，所有其他页面将保留英文（美国），但隐私和ToS不能。注意：信息亭也需要脱机工作（未连接到internet），但如果可能的话，可以偶尔连接以进行更新。api和应用程序由节点Red应用程序/流（均为物联网解决方案的一部分）在内部交付（使用本地主机）

问题是，当加载此动态html时，如果html包含锚，并且用户要单击其中一个锚，则应用程序将导航，并且没有鼠标键盘可向后导航。显而易见的解决方案是不将链接放在首位，但很可能营销人员会从他们的主网站复制隐私正文或ToS并将其交给我们。每个文件可能有10到20个或更多的链接，语言可能有20个左右的文件

我希望在TypeScript中使用Angular JS方案来查看动态更改的DOM，并去掉或修改任何和所有锚定标记的href属性，本质上是“禁用”阻止导航。我直接避开了JQuery。我也不想触摸/修改html文件——可能还需要去掉内联javascript或脚本标记

我还想看看是否有一种方法可以拦截锚上的点击事件，并阻止导航应用程序路由器中尚未定义的内容

最后，我可能会考虑chromium，以防止导航到除localhost之外的任何内容，但这似乎不太理想

欢迎任何意见。 在component.html中

在component.ts中

从'@angular/platform browser'导入{domsanizer}

:

构造函数（公共http:HttpClient，私有sanitizer:DomSanitizer，公共restApi:DeviceApiService）{}

:

this.htmlData=this.sanitizer.bypassSecurityTrustHtml（this.htmlString）

其中htmlString包含来自带有responseType:text的API调用（基于语言）的响应/负载

我注意到，作为已知的内容源，使用bypassSecurityTrustHtml是谨慎的。它还允许适当地呈现内联CSS

包含换行符和锚点内元素的示例html片段。。。（您可以从office文档中看到这一点）。这很难看，但很有道理

<p class=MsoNormal style='margin-top:0in;margin-right:0in;margin-bottom:6.0pt;margin-left:.5in;background:white'>
            <span style='font-size:9.0pt;line-height:107%;font-family:"Verdana",sans-serif;color:#828282'>
                &nbsp; To learn more about
                cookies, please visit&nbsp;
            </span><a href="http://www.allaboutcookies.org/">
                <span style='font-size:9.0pt;line-height:107%;font-family:"Verdana",sans-serif;color:#0C8CAA'>
            http://www.allaboutcookies.org</span>
            </a><span style='font-size:9.0pt;line-height:107%;font-family:"Verdana",sans-serif;color:#828282'>.</span>
        </p>


了解更多关于
饼干，请访问
.

由于您拥有原始HTML字符串，因此您的选项是无限的。您可以使用正则表达式删除外部链接，并用您认为必要的内容替换它

如果regex不是一个可行的选项，您可以在dom上迭代并从锚标记中删除href


从'@angular/core'导入{Component，OnInit，VERSION}；
从“@angular/platform browser”导入{domsanizer，SafeHtml}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent实现OnInit{
htmlData:SafeHtml；
格式化HTMLDATA：安全HTML；
构造函数（私有sanitizer:DomSanitizer）{}
ngOnInit（）：void{
让htmlString:string=`Some Text`；
设formattedHtmlString=this.striplinks（htmlString）；
this.htmlData=this.sanitizer.bypassSecurityTrustHtml（htmlString）；
this.formattedHtmlData=this.sanitizer.bypassSecurityTrustHtml(
格式化HtmlString
);
}
条带链接（文本）{
var re=/不得不承认它很聪明。我唯一关心的是解释允许的语法中的差异，比如换行符。（为问题添加了示例）。在DOM中导航会更好吗？更新了示例。我同意正则表达式覆盖所有场景可能有点棘手。但是，有了一个好的正则表达式，它应该能够覆盖几乎所有可能的组合。由于正则表达式不是100%防错的，因此添加了另一种迭代DOM并从超链接中删除href的方法。在stackblitz中，我刚刚设法提取文本并显示，但您也必须应用css类。这将删除锚定标记上的所有HREF。这有什么帮助吗？阿尔文：是的！感谢您并对延迟响应表示歉意。我最终在我的实用工具帮助器服务中使用了removeHrefFromAnchorTags方法（因为还有另一个组件有类似的需求）。我对：
（元素[I]作为HTMLanchoreElement）。href='javascript:void（0）；'；
和在地图上调用
return node.outerHTML；
做了一些小修改。我最终会扩展它，去掉脚本标记。谢谢！
import { Component, OnInit, VERSION } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  htmlData: SafeHtml;
  formattedHtmlData: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit(): void {
    let htmlString: string = `<div>Some Text</div> <a href="https://google.com">External Link 2</a>`;

    let formattedHtmlString = this.striplinks(htmlString);
    this.htmlData = this.sanitizer.bypassSecurityTrustHtml(htmlString);
    this.formattedHtmlData = this.sanitizer.bypassSecurityTrustHtml(
      formattedHtmlString
    );
  }

  striplinks(text) {
    var re = /<a\s.*?href=[\"\'](.*?)[\"\']*?>(.*?)<\/a>/g;
    var str = text;
    var subst = '$2';
    var result = str.replace(re, subst);
    return result;
  }

removeHrefFromAnchorTags(html) { 
var container = document.createElement('p');
container.innerHTML = html;

var elements = container.getElementsByTagName('*');

for (var i = 0, max = elements.length; i < max; i++) {
  debugger;
  if (elements[i].tagName === 'A') {
    (elements[i] as HTMLAnchorElement).href = '';
  }
}

return [].map.call( elements, function(node){
    return node.textContent || node.innerText || "";
}).join("");