如何显示自定义html标记？

Question

我正在尝试阅读用户输入文本并显示它。

我试过了：

<div>
    <input type="text" ng-model="post.content" />
</div>

<div>
    <div ng-bind-html="post.content| htmlize"></div>
</div>

脚本：

let app = angular.module('myApp', ['ngSanitize']);

app.controller('myController', function ($scope) {

    // controller implements...

}).value('HTMLIZE_CONVERSIONS', [

    { expr: /\n+?/g, value: '<br />' },
    { expr: /\[([BUI])\](.+)\[\/\1\]/g, value: '<$1>$2</$1>' }

]).filter('htmlize', function (HTMLIZE_CONVERSIONS) {

    return function (string) {
        return HTMLIZE_CONVERSIONS.reduce(function (result, conversion) {
            return result.replace(conversion.expr, conversion.value);
        }, string || '');

    };
});

当我输入：

  

[B]粗体[/ B] [U]强调[/ U] [I]斜体[/ I]

它将转换为：

  

粗体强调斜体

我的问题：如何防止代码检测到其他html标签？

我试过了：

案例：

  

<script>alert('')</script>

结果：

  

案例：

  

<h1>text</h1>

结果：

文本

我的目标：我只是想将[B][U][I]转换为<b><u><i>并将其显示为html标签（如我所示），或者显示;将其显示为纯文本。

我该怎么做？

Answer 1

你可以

将<替换为<

将>替换为>

以纯文本格式显示<和>，然后将[和]字符替换为<和>，以使其正确无误HTML标记