Question

非常简单：

我在数据库中存储了数学问题，例如3+6，5*3，4-2等。

我希望输出显示正确的数学×s而不是*（和÷而不是/）。但是由于显而易见的原因，它们必须存储在带有*和/的数据库中（对于数据库中的“普通”字符与html实体相比，尤其是对于能够从字符串中解析它们的mathjs）

所以我正在寻找一种在html输出中更改它们的方法。首先我想到了一些关于css的东西，但那可能意味着我必须为他们上课（或者可能吗？）。然后我想我可以用jS / jQuery做到这一点。但起初感觉过于复杂。

你会怎么做？

（服务器正在运行node.js + jade。字符串来自db并直接在页面上呈现，所以我需要一种方法来“之后”更改符号）

Answer 1

您不一定要将字符存储为HTML实体。只要包含相应的charset元标记，您就可以在页面中使用unicode符号。

<meta charset='utf-8'>

如果你不能将它们作为unicode存储在数据库中，那么你必须以编程方式修复字符串。

var replacementSymbols: {
  '*': '×',
  '/': '÷'
};

function replaceInString(equation) {
  var targetSymbols = Object.keys(replacementSymbols);

  return targetSymbols.reduce(function(string, symbol) {
    var replacement = replacementSymbols[symbol];
    return string.replace(symbol, replacement);
  }, equation);
}

Answer 2

CSS尝试做的事情是不可能的。

您可以使用JavaScript的字符串替换方法来实现此目的。例如：

var str = "5*6"
var res = str.replace("*", "×");

http://www.w3schools.com/jsref/jsref_replace.asp

Answer 3

当您编写html时，可以为每个*

插入<span class='multiply'></span>

然后你可以这样做：

$("span.multiply").html("×");

然后你会对分裂做同样的事情，等等。

修改

你也可以尝试这样的事情：

var newHtml = $('body').html().replace(/\*/g, "×"); $('body').html(newHtml);

Answer 4

除非您使用Angular和过滤器之类的东西来解析字符串，否则这样的事情可能是最好的选择。如果您在呈现页面之前无法插入类，则可能需要查看呈现的数据是否包含在<pre/>标记之类的内容中，以便您可以使用适当的选择器：

<强>模板

<div class="math-expression">
    3 * 4 = 12
</div>

<强>逻辑

document.querySelectorAll('.math-expression').forEach( 
    function( elem, i, arr){
         s = elem.textContent
         elem.textContent = s.replace( /\*/g, 'x' )
    }
 )

注意

我没有对此进行测试，因为我通常只使用Angular过滤器进行这些类型的文本渲染。

替换字符串

4 个答案: