vue 判断字符串是否为json格式,json字符串格式化

本文介绍了一种使用JavaScript实现的方法,用于判断一个字符串是否符合JSON格式,并在此基础上将JSON格式化以便于阅读。通过逐字符解析并跟踪括号数量来实现格式化。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

判断字符串是否为json格式和格式化我写在一起了
js代码:

aaa(){
	//判断字符串是否为json格式
	try{
		var obj = JSON.parse(this.jsonString)
		if(typeof obj == 'object' && obj){
			//对字符串进行格式化展示
			var nbsp = "    "
			var num = 0
			var jsonend = ""
			var array = this.jsonString.split('')
			for(var i = 0; i < array.length; i++){
				if(array[i] === '{'){
					num = num + 1
					jsonend = jsonend + array[i] + '<br/>'
					var temp = num
					while(temp > 0){
						jsonend = jsonend + nbsp
						temp = temp - 1
					}
				}else if(array[i] === '}'){
					num = num - 1
					jsonend = jsonend + '<br/>'
					var temp = num
					while(temp > 0){
						jsonend = jsonend + nbsp
						temp = temp - 1
					}
					jsonend = jsonend + array[i]
				}else if(array[i] === '['){
					num = num + 1
					jsonend = jsonend + array[i] + '<br/>'
					var temp = num
					while(temp > 0){
						jsonend = jsonend + nbsp
						temp = temp - 1
					}
				}else if(array[i] === ']'){
					num = num - 1
					jsonend = jsonend + '<br/>'
					var temp = num
					while(temp > 0){
						jsonend = jsonend + nbsp
						temp = temp - 1
					}
					jsonend = jsonend + array[i]
				}else if(array[i] === ','){
					jsonend = jsonend + array[i] + '<br/>'
					var temp = num
					while(temp > 0){
						jsonend = jsonend + nbsp
						temp = temp - 1
					}
				}else{
					jsonend = jsonend + array[i]
				}
			}
			//格式化完成,写入到页面
			document.getElementById("qwer").innerHTML = jsonend
		}else{
			document.getElementById("qwer").innerHTML = "格式错误"
		}
	}catch(error){
		document.getElementById("qwer").innerHTML = "格式错误"
	}
}

vue代码:

<el-button type="primary" @click="aaa">aaa</el-button><!--绑定js方法-->
<el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>格式化后</span>
  </div>
  <div id="qwer"></div><!--id要和js中document.getElementById里的id一致-->
</el-card>

效果图:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

### VueJSON 字符串格式化的方法 在 Vue 项目中,如果需要对 JSON 字符串进行格式化并展示,可以利用 JavaScript 的内置函数 `JSON.parse` 和 `JSON.stringify` 来完成这一操作。以下是具体的实现方式: #### 实现方案 可以通过以下代码片段来演示如何在 Vue 组件中加载 JSON 数据,并对其进行解析和格式化。 ```javascript <template> <div> <!-- 展示格式化后的 JSON --> <pre>{{ formattedJson }}</pre> <!-- 按钮触发重新渲染 --> <button @click="formatJson">刷新</button> </div> </template> <script> export default { data() { return { jsonData: '[{"name":"黑子","sex":"男","Age":25,"abc":null,"hobby":["篮球","跑步","看电影","王者荣耀"],"normal":true},{"name":"张三","sex":"男","Age":25,"hobby":["上天","入地"],"normal":false}]', // 初始未格式化JSON 字符串[^3] formattedJson: '' // 存储格式化后的 JSON 结果 }; }, methods: { formatJson() { try { const parsedData = JSON.parse(this.jsonData); // 将 JSON 字符串转为对象 this.formattedJson = JSON.stringify(parsedData, null, 2); // 使用 JSON.stringify 进行格式化,缩进设置为 2 个空格 } catch (error) { console.error('JSON 解析失败:', error); this.formattedJson = '无法解析 JSON'; } } }, created() { this.formatJson(); // 初始化时调用一次方法 } }; </script> <style scoped> /* 添加样式使显示更美观 */ pre { background-color: #f4f4f4; padding: 10px; border-radius: 5px; } </style> ``` 上述代码实现了以下几个功能: 1. **数据初始化**:通过 `jsonData` 定义了一个初始的 JSON 字符串。 2. **解析与格式化**:使用 `JSON.parse` 将字符串转化为对象后再通过 `JSON.stringify` 转回字符串形式,同时指定缩进参数(这里是 2 个空格),从而达到格式化的效果[^1]。 3. **错误处理**:捕获可能发生的异常情况,防止因非法 JSON 导致程序崩溃。 4. **动态更新**:提供按钮用于手动触发动态重载逻辑。 #### 关键点说明 - `<pre>` 标签能够保留 HTML 文本中的空白字符和换行符,非常适合用来展示多行文本或已格式化的代码块。 - 如果需要进一步增强用户体验,还可以引入第三方库如 [highlight.js](https://highlightjs.org/) 或者专门针对 JSON 高亮的工具来进行语法着色。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值