replacing specific characters in strings

Question

pretty simple:

i have mathematical problems stored in a DB, like 3+6 , 5*3 , 4-2 etc.

i want the output to show proper mathematical ×s instead of * (and ÷ instead of /). but they have to be stored in the DB with * and / for obvious reasons (being "normal" characters vs. html entities in DB and especially for mathjs to be able to solve them from string)

so i am looking for a way to change them in the html output. first i thought about something with css, but that would probably mean i'd have to have a class for them (or is it possible?). then i thought i could do it with jS/jQuery. but it feels overly complicated at first.

how would you do this?

(server is running node.js + jade. the strings come from the db and are rendered directly on the page, so i need a way to change the symbols "afterwards")

Answer 1

You don't necessarily have to store the characters as HTML entities. So long as you include the appropriate charset meta tag, then you'll be able to use unicode symbols in your page.

<meta charset='utf-8'>

If you can't store them in the database as unicode, then you'll have to programatically fix the strings afterwards.

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

What you're attempting to do is not really possible with CSS.

You could use JavaScript's string replace method to achieve this instead. for instance:

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

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

Answer 3

When you're writing your html, you can insert a <span class='multiply'></span> for each *

Then you can do:

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

And then you you would do the same with division, and so on.

EDIT

You could also try something like this:

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

Answer 4

Unless you're using something like Angular and a filter to parse the string, something like this might be the best option. If you're not able to insert classes before the page is rendered, you may need to see if the rendered data is wrapped in something like <pre/> tag so that you can use the appropriate selector:

template

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

logic

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

note

I didn't test this as I normally just use Angular filters for these types of text renderings.