Search code examples
javascriptregexlatexmathjax

Regular Expressions in finding LaTex directives in webpages with Javascript


I need to replace the LaTex directives in webpages. The LaTex directives are wraped in two '$' signs which are like $a^2+b^2=1$(an inline formula) or $$a^2+b^2=1$$(a block formula which will be displayed in a new line). The question is now I want to use Javascript to replace thest directives with some pics(correspond to these directives), as the browsers itself are aparently not capable to display these formulas in a LaTex style. (see picture)a^2+b^2=1How can I use Regular Expressions to do this? And I showed my work below, with some problems. for inline formulas, I use:

var reg = /\$([^$]|(\\$))*\$(?=[^$])/mg

which means I want some text start with $ and after that whether it is 'not $' or it is '\$' or nothing, and end with '$' but after the end will not allowed the rise of $. Sounds good.. but for text like:$a^2\$b^2$ aparently, I wish it will displayed as (see picture) a^2\$b^2, but the truth is the regex replaces only part of it like '*replaced*b^2$'. I need some help~~


Solution

  • The following RegExp

    /(\${1,2})((?:\\.|.)*)\1/
    

    will match a LaTex block enclosed in single or double dollars. Note the use of the backreference \1 to match the opening tag.

    If the LaTex blocks can extend ovver line boundaries then use

    /(\${1,2})((?:\\.|[\s\S])*)\1/
    

    To to a global replace within a string say source:

    source.replace (/(\${1,2})((?:\\.|[\s\S])*)\1/g, function (m, tag, src) {
      // m is the entire match
      // tag is '$' or '$$' 
      // src is the internal text
    
      var rslt = ''; 
    
      // create what you want to appear in rslt.
    
      return rslt;
    }