在angularjs中使用<math>标签渲染普通文本答案

【问题标题】：Rendering normal text with <math> tag in angularjs在angularjs中使用<math>标签渲染普通文本
【发布时间】：2019-11-24 19:57:01
【问题描述】：

我想用angularjs渲染以下内容

"The value of <math xmlns='http://www.w3.org/1998/Math/MathML' style='background-color:#'> <semantics> <mrow> <munder> <mrow> <mi>lim</mi></mrow> <mrow> <mi>x</mi><mo>&#x2192;</mo><mfrac> <mi>&#x03C0;</mi> <mn>2</mn> </mfrac> </mrow> </munder> <msup> <mrow> <mrow><mo>(</mo> <mrow> <mi>sin</mi><mi>x</mi></mrow> <mo>)</mo></mrow></mrow> <mrow> <mi>tan</mi><mi>x</mi></mrow> </msup> </mrow> <annotation encoding='MathType-MTEF'>MathType@MTEF@5@5@+= feaahaart1ev3aaatCvAUfeBSjuyZL2yd9gzLbvyNv2CaerbuLwBLn hiov2DGi1BTfMBaeXatLxBI9gBamXvP5wqonvsaeHbfrwDuv2yObqe euuDJXwAKbsr4rNCHbGeaGqiVu0Je9sqqrpepC0xbbL8F4rqqrFfpe ea0xe9Lq=Jc9vqaqpepm0xbba9pwe9Q8fs0=yqaqpepae9pg0Firpe peKkFr0xfr=xfr=xb9adbaqaaeaacaGaaiaabaqaaeGadaabaaGcba WaaCbeaeaaciGGSbGaaiyAaiaac2gaaSqaaiaadIhacqGHsgIRdaWc aaqaaiabec8aWbqaaiaaikdaaaaabeaakmaabmaabaGaci4CaiaacM gacaGGUbGaamiEaaGaayjkaiaawMcaamaaCaaaleqabaGaciiDaiaa cggacaGGUbGaamiEaaaaaaa@4A6C@ </annotation> </semantics></math> is"

以上内容包含纯文本以及<math> 标签。

这是我想要实现的目标

查看文件

<span ng-bind-html="content"></span>

Ctrl 文件

$scope.content = "The value of <math xmlns = 'http://www.w3.org/1998/Math/MathML' style = 'background-color:#' > <semantics> <mrow> <munder> <mrow> <mi>lim</mi></mrow> <mrow> <mi>x</mi><mo>&#x2192;</mo><mfrac> <mi>&#x03C0;</mi> <mn>2</mn> </mfrac> </mrow> </munder> <msup> <mrow> <mrow><mo>(</mo> <mrow> <mi>sin</mi><mi>x</mi></mrow> <mo>)</mo></mrow></mrow> <mrow> <mi>tan</mi><mi>x</mi></mrow> </msup> </mrow> <annotation encoding='MathType-MTEF'>MathType@MTEF@5@5@+= feaahaart1ev3aaatCvAUfeBSjuyZL2yd9gzLbvyNv2CaerbuLwBLn hiov2DGi1BTfMBaeXatLxBI9gBamXvP5wqonvsaeHbfrwDuv2yObqe euuDJXwAKbsr4rNCHbGeaGqiVu0Je9sqqrpepC0xbbL8F4rqqrFfpe ea0xe9Lq=Jc9vqaqpepm0xbba9pwe9Q8fs0=yqaqpepae9pg0Firpe peKkFr0xfr=xfr=xb9adbaqaaeaacaGaaiaabaqaaeGadaabaaGcba WaaCbeaeaaciGGSbGaaiyAaiaac2gaaSqaaiaadIhacqGHsgIRdaWc aaqaaiabec8aWbqaaiaaikdaaaaabeaakmaabmaabaGaci4CaiaacM gacaGGUbGaamiEaaGaayjkaiaawMcaamaaCaaaleqabaGaciiDaiaa cggacaGGUbGaamiEaaaaaaa@4A6C@ </annotation> </semantics></math > is";

这是我得到的输出

The value of lim x→ π 2 ( sinx ) tanx MathType@MTEF@5@5@+= feaahaart1ev3aaatCvAUfeBSjuyZL2yd9gzLbvyNv2CaerbuLwBLn hiov2DGi1BTfMBaeXatLxBI9gBamXvP5wqonvsaeHbfrwDuv2yObqe euuDJXwAKbsr4rNCHbGeaGqiVu0Je9sqqrpepC0xbbL8F4rqqrFfpe ea0xe9Lq=Jc9vqaqpepm0xbba9pwe9Q8fs0=yqaqpepae9pg0Firpe peKkFr0xfr=xfr=xb9adbaqaaeaacaGaaiaabaqaaeGadaabaaGcba WaaCbeaeaaciGGSbGaaiyAaiaac2gaaSqaaiaadIhacqGHsgIRdaWc aaqaaiabec8aWbqaaiaaikdaaaaabeaakmaabmaabaGaci4CaiaacM gacaGGUbGaamiEaaGaayjkaiaawMcaamaaCaaaleqabaGaciiDaiaa cggacaGGUbGaamiEaaaaaaa@4A6C@ is

您只需将上述内容以 .html 扩展名保存即可查看预期的输出。

【问题讨论】：

标签： angularjs mathjax

【解决方案1】：

可以将内容html拆分成不同的部分，并填写html标签。如

<span>The value of </span><math xmlns='http://www.w3.org/1998/Math/MathML'...></math><span>is</span>

【讨论】：

我在数据库中有数千个这样的内容。修改每个数据会花费很多时间。
您可以使用正则表达式匹配关键字'math'并拆分内容
试过你的答案，它仍在加载相同的输出。
只要把 $w3.org/1998/Math/MathML'...></math> 放到 html 中。确保它可以正常工作。$

【解决方案2】：

我使用 ngsanitize 通过 ng-bind-html 将 HTML 标记为安全。后来我才知道 ng-bind-html 功能将使用 $sanitize 验证 Html。为了绕过这个验证，我使用了

app.filter("trustHtml", ['$sce', function ($sce) {
    return function (htmlCode) {
        return $sce.trustAsHtml(htmlCode);
    }
}]);

并在视图中使用它

<span ng-bind-html="content" | trustHtml ></span>

除此之外，我还使用了

<script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.0.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
    </script>

渲染<math> 标签内容。在这里，如果在 content 中进行任何更改，MathJax 将需要刷新。因此，我使用以下来寻找变化

$rootScope.$watch(function () {
    MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
    return true;
});

【讨论】：