javascript - 仅允许 contenteditable div 中的某些标签

Question

我有一个 contenteditable div 并使用键盘快捷键，如 ctrl+i用户能够格式化文本。当他们输入innerHTML时反射(reflect)标签的更改即:

Hello&nbsp;<i>thanks for&nbsp;<br><br>for showing up<b>&nbsp;y'all b</b></i>

这很好，并且很适合我的目的。但问题出现了，当我去打印不同的 html div 时如果用户添加任何其他 html 标签，他们可能真的会搞乱应用程序。

例如，如果他们添加了 <script>标签或 style等等..如何让用户仅允许添加 <i> , <br> , <b> , <s> ，和 无法添加其他任何内容？

有什么想法吗？谢谢

Answer 1

我认为您可以使用 regExpression 来避免“indeseables”标签。有些喜欢

<textarea #data [(ngModel)]="value" (input)="replace(data)"></textarea>
<div [innerHtml]="valueParse">
</div>

replace(control:any)
{
   this.valueParse=control.value.replace(/<(?!br|i|u)((\w+))>/gm,"&lt$1&gt")
   .replace(/<\/(?!br|i|u)((\w+))>/gm,'&lt\/$1&gt');
}

参见stackblitz