Is there any generic function for subscripting?

Question

I have a web page in which contents are loaded dynamically from json. Now i need to find the texts like so2,co2,h2o after the page gets loaded and have to apply subscript for those texts. Is it possible to do this?? If yes please let me know the more efficient way of achieving it.

for example :

var json = { chemA: "value of CO2 is", chemB: "value of H2O is" , chemC: "value in CTUe is"};

in the above json i need to change CO2,H2O and e in CTUe as subscript. how to achieve this??

Here's some guidance... https://en.wikipedia.org/wiki/Unicode_subscripts_and_superscripts — RichS, Oct 09 '15 at 06:42
Subscript text can be displayed using the html `_{` tag, the actual logic is for you to figure out!} — perennial_, Oct 09 '15 at 06:43
@WookieCoder - in my page all my contents will be coming from json and it is purely dynamic. I will be just picking the text from json and displaying in the page. so i need to find out these text from page and then replace those values with subscript. — Keshav1007, Oct 09 '15 at 06:48
show us your json, sounds like there is very likely an easier way — Wesley Smith, Oct 09 '15 at 06:57
@DelightedD0D - i have edited my question hope now i m clear — Keshav1007, Oct 09 '15 at 11:13
@Keshav1007 Yeah, that gives us much more to go on, see my answer below — Wesley Smith, Oct 09 '15 at 13:24

Deepak Biswal · Answer 1 · 2015-10-09T11:21:43.370

0

So you are generating DOM element as per JSON data you are getting. So before displaying it to DOM you can check if that JSON data contains so2,co2,h2o and if it is then replace that with <sub> tag.

For ex:

var text = 'CO2';
text.replace(/(\d+)/g, "<sub>" + "$1" + "</sub>") ;

And this will returns something like this: "CO₂".

As per JSON provided by you:

// Only working for integer right now
var json = { chemA: "value of CO2 is", chemB: "value of H2O is" , chemC: "value in CTUe is"};
$.each(json, function(index, value) {
    json[index] = value.replace(/(\d+)/g, "<sub>" + "$1" + "</sub>");
});
console.log(json);

Hope this will helps!

edited Oct 09 '15 at 11:21

answered Oct 09 '15 at 06:57

Deepak Biswal

4,280
2
20
37

This will work, but it is an awful way to accomplish the result and it is begging to fail. (Nothing against Deepak, its exactly what the OP asked for) the OP should really build the html directly from the JSON with the elements needed – Wesley Smith Oct 09 '15 at 07:00
1

Yes, after appending text to DOM and then searching those text and replace with `_{` tag is complicated. It's better to generate the DOM element with `_{` tag before adding to DOM.}} – Deepak Biswal Oct 09 '15 at 07:02
@DeepakBiswal - i have edited my question hope now i m clear – Keshav1007 Oct 09 '15 at 11:14
You can easily do that for _{tag if it's integer. For `CTUe` how you are going to do that. There may be some other words like that as well right or you just want `CTUe` and other must have interger as _.} – Deepak Biswal Oct 09 '15 at 11:20
@DeepakBiswal yes there are few other words also like that.. but if i found some way to replace CTU then i can alter those for other words.. – Keshav1007 Oct 09 '15 at 13:01

score 0 · Answer 2 · answered Oct 09 '15 at 07:08

Take a look at this JSfiddle which shows two approaches:

HTML-based using the <sub> tag
Pure Javascript-based by replacing the matched number with the subscript equivalent in unicode:

http://jsfiddle.net/7gzbjxz3/

var json = { chemA: "CO2", chemB: "H2O" };
var jsonTxt = JSON.stringify(json).replace(/(\d)+/g, function (x){
    return String.fromCharCode(8320 + parseInt(x));
});

Option 2 has the advantage of being more portable since you're actually replacing the character. I.e., you can copy and paste the text into say notepad and still see the subscripts there.

The JSFiddle shows both approaches. Not sure why the magic number is 8320 when I was expecting it to be 2080...

Wesley Smith · Answer 3 · 2015-10-09T13:39:17.470

To do this, I would create a prototype function extending String and name it .toSub(). Then, when you create your html from your json, call .toSub() on any value that might contain text that should be in subscript:

// here is the main function
String.prototype.toSub = function() {
    var str=this;
    var subs = [
      ['CO2','CO<sub>2</sub>'],
      ['H2O','H<sub>2O</sub>'],
      ['CTUe','CO<sub>e</sub>'] // add more here as needed.
    ];
    for(var i=0;i<subs.length;i++){
         var chk = subs[i][0];
         var rep = subs[i][1];
      var pattern = new RegExp('^'+chk+'([ .?!])|( )'+chk+'([ .?!])|( )'+chk+'[ .?!]?$','ig');  // makes a regex like this: /^CO2([ .?!])|( )CO2([ .?!])|( )CO2[ .?!]?$/gi  using the surrent sub
         // the "empty" capture groups above may seem pointless but they are not
         // they allow you to capture the spaces easily so you dont have to deal with them some other way
         rep = '$2$4'+rep+'$1$3'; //  the $1 etc here are accessing the capture groups from the regex above 
      str = str.replace(pattern,rep); 
    }
  return str;
};


// below is just for the demo
var json = { chemA: "value of CO2 is", chemB: "value of H2O is" , chemC: "value in CTUe is", chemD: "CO2 is awesome", chemE: "I like H2O!", chemF: "what is H2O?", chemG: "I have H2O. Do you?"};

$.each(json, function(k, v) {
    $('#result').append('Key '+k+' = '+v.toSub()+'<br>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>

Note:

Anytime you do something like this with regex, you run the chance of unintentionally matching and converting some unwanted bit of text. However, this approach will have far fewer edge cases than searching and replacing text in your whole document as it is much more targeted.

Is there any generic function for subscripting?

3 Answers3

Note: