英文:
Extract href from string and again bind the updated data to the element in Angular
问题
我得到一个类似这样的字符串在 innerHtml 中：
<div class="wrapper" [innerHTML]="data.testString">
data.testString 包含如下数据：
data.testString="<p>一些信息，电子邮件 <a href="mailto:test@test.com">test@test.com</a> 信息 </p>"
我想为锚点标签添加 aria-label。
<a aria-label="test@test.com" href="mailto:test@test.com">test@test.com</a>
所以我在 .ts 文件中添加了以下代码：
ngAfterViewInit(): void {var myData = this.data.testString;var element = myData!.match!(/href="([^"]*)/)![1];var ariaLabel = "电子邮件地址 " + element;this.data.testString=this.data.testString!.replace('<a', '<a aria-label="' + ariaLabel + '" ');}}
但我收到以下错误消息：
global-error-handler.ts:26 TypeError: Cannot assign to read only property 'testString' of object '[object Object]'
如何解决这个问题？
英文:
I am getting one string like this in innerHtml
<div class="wrapper" [innerHTML]="data.testString">
data.testString contains data like below,
data.testString="<p>some info, email <a href="mailto:test@test.com">test@test.com</a> info </p>";
I want to add aria-label for the anchor tag.
<a aria-label="test@test.com" href="mailto:test@test.com">test@test.com</a>
so I have added below code in .ts file
ngAfterViewInit(): void {var myData = this.data.testString;var element = myData!.match!(/href="([^"]*)/)![1];var ariaLabel = "EmailId " + element;this.data.testString=this.data.testString!.replace('<a', '<a aria-label = "' + ariaLabel + '" ');}}
But I am getting below error
global-error-handler.ts:26 TypeError: Cannot assign to read only property 'testString' of object '[object Object]'
How to resolve this?
答案1
得分: 1
-
字符串字符转义
var testString="<p>some info, email <a href="mailto:test@test.com">test@test.com</a> info </p>";存在引号问题：双引号字符串不能包含双引号，除非用反斜杠 \ 转义（参考 https://www.w3schools.com/js/js_strings.asp -> 转义字符部分）
你可以通过将一些双引号替换为单引号来解决这个问题：
"<p>some info, email <a href='mailto:test@test.com'>test@test.com</a> info </p>" -
正则表达式
var href = datar!.match!(/href="([^"]*)/)![1];不确定这是否是你需要的模式。请尝试使用以下模式：
var href = datar!.match!(/href=\'mailto:([a-z@.]+)'/)![1]; -
DOM 元素操作
关于向 元素添加 aria-label 属性，最好使用 Angular 的
nativeElement.setAttribute(key, value)或原生 JavaScript 的querySelector（参考 https://indepth.dev/posts/1336/how-to-do-dom-manipulation-properly-in-angular 和 https://angular.io/guide/property-binding）
最后，我强烈建议使用 RegExr 来测试你的正则表达式 https://regexr.com/7ep0u 以及 jsfiddle.net 来在安全环境中测试你的 JavaScript 代码：https://jsfiddle.net/nkarfgx3/
英文:
I'm not sure to understand all but below might help you :
- String character escaping
>var testString="<p>some info, email <a href="mailto:test@test.com">test@test.com</a> info </p>";
There is a quote issue : a double-quoted string cannot contain double-quotes unless escaped by the \ character (cf. https://www.w3schools.com/js/js_strings.asp -> Escape Character section)
You may fix this issue by replacing some double quotes by simple quotes :
"<p>some info, email <a href='mailto:test@test.com'>test@test.com</a> info </p>"
- Regular expression
>var href = datar!.match!(/href="([^"]*)/)![1];
Not sure this is the pattern you need. Try instead :
var href = datar!.match!(/href=\'mailto:([a-z@.]+)'/)![1];
- DOM element manipulation
About adding the aria-label attribute to the <a>, you would better go with Angular nativeElement.setAttribute(key, value) native javascript querySelector
(cf. https://indepth.dev/posts/1336/how-to-do-dom-manipulation-properly-in-angular and https://angular.io/guide/property-binding)
Finally I would highly recommend the use of RegExr to test your regular expressions https://regexr.com/7ep0u
as well as jsfiddle.net to test your javascript in a safe environment : https://jsfiddle.net/nkarfgx3/
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论