javascript - 如何显示自定义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]bold[/B] [U]underline[/U] [I]italic[/I]

它将转换为:

bold u̲n̲d̲e̲r̲l̲i̲n̲e̲ italic

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

我已经尝试过:

案例:

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

结果:

案例:

<h1>text</h1>

结果:

文本

我的目标:我只想转换[B][U][I]至<b><u><i>并将它们显示为 html 标签(如我所示)，否则；将其显示为纯文本。

我怎样才能做到这一点？

Answer 1

你可以

替换<与 <

替换>与 >

显示<和>纯文本，然后替换 [和]带有 < 的字符和>使它们正确的 HTML 标签