gpt4 book ai didi

javascript - Angular 6 : Prevent Browser Tooltip to show HTML tags in "innerHtml"

转载 作者:行者123 更新时间:2023-11-30 19:38:50 24 4
gpt4 key购买 nike

我的 Angular 应用程序中的模板使用以下代码:

...
<span [innerHtml]="textVar"></span>
...

因为所需的文本需要在某些字符/字符串位置应用特殊的动态样式,所以必须对其进行格式化。 textVar 变量是使用以下代码创建的:

...
var textVar = someString.bold() + "&#160" + anotherString;
...

文本以粗体文本正确显示,中间有一些制表符空间。问题是,如果您将鼠标悬停在文本上,工具提示会显示带有 html 标签的文本,如下所示:

<b>someString</b>&#160anotherString

但我希望工具提示删除工具提示文本中的 html 标签。

我该怎么做?

最佳答案

span 的工具提示行为由 title 属性控制。您可以尝试将此 title 属性设置为您的 textVar 的解析值。基于this SO answer我们可以利用 DOMParser帮助我们获取解析后的 html。考虑以下简化示例:

export class AppComponent  {
name = 'Angular';
textVar = '<b>someString</b>&#160anotherString'

parsedText(text) {
const dom = new DOMParser().parseFromString(
'<!doctype html><body>' + text,
'text/html');
const decodedString = dom.body.textContent;
return decodedString;
}
}

组件模板如下所示:

<span [title]="parsedText(textVar)" [innerHtml]="textVar"></span>

查看此 Stackblitz一个工作示例。

关于javascript - Angular 6 : Prevent Browser Tooltip to show HTML tags in "innerHtml",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55633045/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com