解决 WordPress 版小程序文章内容中的“<”和“>”字符显示问题

在 html 转 wxml 的过程中,最大的问题就是 html 标签的转化,当前我的小程序用的是“wxParse”工具来实现 html to wxml,只不过有一个问题,当文章中含有“<”和“>”符号时,虽然在获得的文章内容响应中这两个字符被编码为“&lt;”和“&gt;”,但是在 wxparse 解析 html 前会先进行 html 特殊字符的解码,就把“&lt;”和“&gt;”又解码为“<”和“>”,然后才进行标签转化。这样就造成文章内容中的“<”和“>”也会识别为 html 标签,造成解析出现问题,最终导致文章一直加载不出来。这里说一说我是怎么解决这个问题的。

2018-6-11 更新:解决“&amp;lt;”,“&amp;gt;”也被解析为“<”和“>”的问题。

先看看 wxparse 在解析 html 前是怎么解码 html 特殊字符的(解码代码在 wxDiscode.js 文件中)。

在 html2json.js 的 html2json 函数中,前几行是这样的:

function html2json(html, bindName) {
    // 处理字符串
    html = removeDOCTYPE(html);
    html = trimHtml(html);
    html = wxDiscode.strDiscode(html);
    // 生成node节点

可以看到在生成结点前先调用了 wxDiscode.js 中的 strDiscode 函数。我们再来看看这个函数是干啥的:

function strDiscode(str){
    str = strNumDiscode(str);
    str = strGreeceDiscode(str);
    str = strcharacterDiscode(str);
    str = strOtherDiscode(str);
    str = strMoreDiscode(str);
    return str;
}

其实就是调用 wxDiscode.js 中的其他解码函数,这些解码函数中包含了很多 replace函数,对传送过来的字符串中的 html 特殊字符进行解码。其中我们可以看到有这样三个替换(以下三行在文件中不在一块):

str = str.replace(/&lt;/g, '<');
str = str.replace(/&gt;/g, '>');
str = str.replace(/&amp;/g, '&');

这三个替换就是将字符串中的“&lt;”、“&gt;”和“&amp;”替换为“<”、“>”和“&”。为什么要再说个“&amp;”呢?因为在写完这篇文章后发现在小程序中,文章中的“&lt;”也被解析为“<”,这不对呀,明明我想要的是“&lt;”呀。这个“&lt;”其实被转义为“&amp;lt;”。而在 wxDiscode.js 中,“&amp;”先被替换为“&”,这样后面在替换“&lt;”和“&gt;”时就会将原来的“&amp;lt;”也替换了。说明白了就是:“&amp;lt;” –> “&lt;” –> “<”。这并不是我们想要的。怎么解决这个问题呢?其实只要把对“&amp;”的解析放到“&lt;”和“&gt;”的后面就可以了。

我的思路呢,很简单,就是在这里把这三个替换去掉,这样文章内容中的“<”和“>”在解析时还是“&lt;”和“&gt;”的形式,就不怕被误解析了。然后在解析完生成的结点中再进行替换。

思路有了,怎么做呢?避免解析前替换很好弄,把那三行替换给注释掉就行了,解析后的替换呢?我们先看一下解析后的结点是怎么处理“text”结点的(在 html2json.js 文件中):

chars: function (text) {
    /*debug(text);*/
    var node = {
        node: 'text',
        text: text,
        textArray:transEmojiStr(text)
    };
    
    if (bufArray.length === 0) {
        results.nodes.push(node);
    } else {
        var parent = bufArray[0];
        if (parent.nodes === undefined) {
            parent.nodes = [];
        }
        node.index = parent.index + '.' + parent.nodes.length
        parent.nodes.push(node);
    }
},

虽然不懂这段代码是啥意思,但我看到了:“textArray:transEmojiStr(text)”,于是我就找了找这个函数:“transEmojiStr”,这个函数就在上面那段代码的下面:

function transEmojiStr(str){
  var emojiObjs = [];
  /*如果正则表达式为空*/
  if(__emojisReg.length == 0 || !__emojis){
      var emojiObj = {}
      emojiObj.node = "text";
      emojiObj.text = str;
      array = [emojiObj];
      return array;
  }
  /*这个地方需要调整*/
  str = str.replace(/\[([^\[\]]+)\]/g,':$1:')
  var eReg = new RegExp("[:]");
  var array = str.split(eReg);
  for(var i = 0; i < array.length; i++){
    var ele = array[i];
    var emojiObj = {};
    if(__emojis[ele]){
      emojiObj.node = "element";
      emojiObj.tag = "emoji";
      emojiObj.text = __emojis[ele];
      emojiObj.baseSrc= __emojisBaseSrc;
    }else{
      emojiObj.node = "text";
      emojiObj.text = ele;
    }
    emojiObjs.push(emojiObj);
  }
  
  return emojiObjs;
}

嗯,我看到了 replace 函数,也看到了“emojiObj.text = str;”和最终返回的就是这个“emojiObj”,于是,我就在这个函数中使用了 replace 大法:

function transEmojiStr(str){
  /*修复 < > 的显示问题*/
  str = str.replace(/&lt;/g, '<');
  str = str.replace(/&gt;/g, '>');
  str = str.replace(/&amp;/g, '&');
  var emojiObjs = [];
  /*如果正则表达式为空*/
  if(__emojisReg.length == 0 || !__emojis){
      var emojiObj = {}
      emojiObj.node = "text";
      emojiObj.text = str;
      array = [emojiObj];
      return array;
  }
  // 这个地方需要调整
  str = str.replace(/\[([^\[\]]+)\]/g,':$1:')
  var eReg = new RegExp("[:]");
  var array = str.split(eReg);
  for(var i = 0; i < array.length; i++){
    var ele = array[i];
    var emojiObj = {};
    if(__emojis[ele]){
      emojiObj.node = "element";
      emojiObj.tag = "emoji";
      emojiObj.text = __emojis[ele];
      emojiObj.baseSrc= __emojisBaseSrc;
    }else{
      emojiObj.node = "text";
      emojiObj.text = ele;
    }
    emojiObjs.push(emojiObj);
  }
  
  return emojiObjs;
}

我在第3、4、5行添加了三个替换语句,将 str 中的“&lt;”、“&gt;”和“&amp;”替换为“<”、“>”和“&”。

保存,测试,之前加载不出来的文章顺利加载出来了 :(哈哈)


版权说明:
作品 sunriseydy 采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。
文章内容如未说明均为原创,欢迎转载,但请注明原作者(sunriseydy)和原文链接(https://blog.sunriseydy.top/technology/server-blog/wordpress/wordpress-wxminiapp-post-content-html-tag-discode/)
部分来自互联网的文章,如有侵权,请联系我,24小时内删除,谢谢

手机打开扫一扫即可访问本页面

感谢您的支持,SunriseYDY 会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

日出一点一 | 在探索的路上永不止步

分享到微博 分享到QQ 微信赞赏 在手机上阅读 点赞 2

评论一下呗亲

电子邮件地址不会被公开。 必填项已用*标注