精品课程网站怎么做,国内代理,北京推广优化公司,wordpress 显示不全✈️涉及知识
如何取消JSON默认数值排序#xff0c;JSON.parse()函数排序关闭#xff0c;取消JSON.parse排序#xff0c;Json格式化校验#xff0c;jsonview排序问题解决方法。 #x1f947;专栏#x1f947;#xff1a;前端技术#xff0c;json格式化 #x1f482;关…✈️涉及知识
如何取消JSON默认数值排序JSON.parse()函数排序关闭取消JSON.parse排序Json格式化校验jsonview排序问题解决方法。 专栏前端技术json格式化 关于我一个持续输出型博主爱分享喜技术期待关注与交流 ❤️公众号❤️《IT黄大大》更多技术分享抢先看 皇榜专区一键轻松上皇榜皇榜特区享有私聊优先资源 jsonview排序 ✈️涉及知识✈️写在前面效果展示1、问题背景2、解决方案2.1 网上方案不适配2.2 最终解决方案A、去除冒号前空格B、正则表达式将所有key替换C、html渲染替换回来 2.3 反斜杠问题A、正则表达式将所有替换B、html渲染替换回来 3、结果验证✈️作者寄语 ✈️写在前面
因为公司业务调整所有配置文件得从库中读取因此一些json文件的格式化展示校验工作落到我身上了最近我特意花了两天时间搞一个自定义封装json格式化校验组件的事情当时我是基于jquery的jsonview组件来做的其实一开始我是自己写的后面发现写树结构有点复杂于是乎还是用组件去实现省的麻烦了在我快大功告成时候发现我的json格式居然和我原有的顺序不匹配我还以为组件的问题捣鼓了一会儿才找到parse原因。 声明原创于博主《IT黄大大》更多资讯可关注微信公众号《IT黄大大》如有转载请说明出处创作不易
效果展示
我是比较喜欢注重效果说话的一个博主哈如果这个效果图并不是你想要的就可以划走希望能给大家寻找资料减少时间。
1、问题背景
文章头部我也写了一些关于我的问题源头下面我先给大家看张图吧 这个是我json格式化自己写的一个页面不难发现我的key为info的值在输入框是最上面的但是一格式化就变成在最下面去了主要原因还是用了JSON.parse()这个函数因为它默认会对数值类带有一个排序规则针对字符和数值类的key进行了默认升序的操作。 你去网上看看很多在线json格式化工具也都是将数组类的提前了如下 所以我想解决的是很多在线软件都没能解决的问题哈哈哈哈哈瞬间觉得自己好厉害
2、解决方案
2.1 网上方案不适配
从第一节我们就可以知道哈我们的需求是保持原有的顺序不变其实要实现这个我们还得从key名本身入手我们用的最多的是直接将json字符串放里面当然网上还有人建议我对JSON.parse的函数第二个变量添加一个转化器这个方式并不能解决我的数值类问题因此我也就针对我的问题做了一个思路转化。
2.2 最终解决方案
因为其是对数值类的排序存在问题最终我的目的是要在右侧展示出来我统一对数值类的key添加一个特定的字符串hdd然后在渲染页面的时候将特定字符串去除掉。核心就是将所有的《“:》进行替换成特定字符串《hdd”:》,通过这种方式来达到统一替换的目的。 那么就有人会问要是我的不是《“:》这种而是《” :》,又或是《 :》这种多个空格在冒号前面呢 针对上面的问题哈我们就从下面三个步骤去做
A、去除冒号前空格
因为我也不知道有多少个空格因此我们就用递归去做这件事情吧如下递归函数。
function removeBlank(str){if(str.indexOf( :)-1){str str.replace(/ :/g, :);return removeBlank(str);}else{return str;}
};只要调用一下jsonstr removeBlank(jsonstr)即可。
B、正则表达式将所有key替换
【切记】在JSON.parse函数之前
json json.replace(/:/g, hdd:);C、html渲染替换回来
在jsonview组件的JSONFormatter.prototype.objectToHTML方法体内添加如下所示代码
if(key.indexOf(hdd)){key key.replace(/hdd/g, );
}这样的话把之前替换过的也就替换回来了。我们就可以继续格式化了如下所示效果 声明原创于博主《IT黄大大》更多资讯可关注微信公众号《IT黄大大》如有转载请说明出处创作不易
2.3 反斜杠问题
替换后我发现出现反斜杠的话就会存在另一个问题也就是解析不出来导致json错误因此我又针对反斜杠进行了字符串的替换当然这样能解决问题大家如果有更好的想法不妨留言一起讨论学习学习。 和上面的2.2类似我们也用这种方式去做替换完了再替换回来担心国际友人不好理解特意用了fanxiegang字符替换如下所示
A、正则表达式将所有替换
【切记】在JSON.parse函数之前
json json.replace(/\\/g, fanxiegang);B、html渲染替换回来
在jsonview组件的JSONFormatter.prototype.objectToHTML方法体内添加如下所示代码
var spanStr (this.valueToHTML(value, level 1));
if(spanStr.indexOf(fanxiegang)-1){spanStr spanStr.replace(/fanxiegang/g, \);
}到这里就基本告一段落了哈。
3、结果验证
这个地方主要也是对反斜杠支持冒号前空格数值类key键格式化收缩与展开等多个功能进行验证具体效果如下 从上图不难发现真心可以都已实现
✈️作者寄语
如果我的这篇博客对您有帮助、而且您喜欢我的博客内容请 “点赞” “评论” “收藏” 一键三连哦当然如果这个文章对您带来不好的体验还希望能多多包涵一起学习进步。
【关注我 | 获取更多源码 | 优质文章】 带您学习前端知识、CSS特效、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业百套成品等! 「在公众号IT黄大大里也会定期分享一些免费好看的html页面期待您的关注哈」 声明原创于博主《IT黄大大》更多资讯可关注微信公众号《IT黄大大》如有转载请说明出处创作不易
2024年我们一起加油一起成长感谢您的支持与谅解
