Question

我有一个网页，其中的内容是从json动态加载的。现在我需要在页面加载后找到像so2，co2，h2o这样的文本，并且必须为这些文本应用下标。是否有可能做到这一点？？如果是，请让我知道实现它的更有效方法。

例如：

var json = {chemA：“CO2的值是”，chemB：“H2O的值是”，chemC：“CTUe的值是”};

在上面的json我需要改变CTUe中的CO2，H2O和e作为下标。怎么实现这个？

Answer 1

所以你要根据你得到的JSON数据生成DOM元素。因此，在将其显示到DOM之前，您可以检查JSON数据是否包含so2，co2，h2o，然后将其替换为<sub>标记。

例如：

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

这将返回如下内容：＆＃34; CO ₂＆＃34;。

根据您提供的JSON：

// 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);

希望这会有所帮助！

Answer 2

看看这个JSfiddle，它显示了两种方法：

使用<sub>标记
纯粹基于Javascript的，将匹配的数字替换为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));
});

选项2具有更便携的优点，因为您实际上正在替换角色。即，您可以将文本复制并粘贴到记事本中，然后仍然可以看到下标。

JSFiddle显示了这两种方法。不知道为什么当我期待它是2080时，幻数是8320 ......

Answer 3

为此，我要创建一个prototype扩展String的函数，并将其命名为.toSub()。然后，当您从json创建html时，对任何可能包含应该在下标中的文本的值调用.toSub()：

＆＃13;

// 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>');
});

＆＃13;

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

＆＃13;

注意：

无论何时使用正则表达式执行此类操作，您都有可能无意中匹配并转换一些不需要的文本。但是，与搜索和替换整个文档中的文本相比，这种方法的边缘情况要少得多，因为它更具针对性。

是否有任何通用的下标功能？

3 个答案:

注意：