聊聊隐藏 div 的两种方式及差异
记一次因 display:none 和 visibility:hidden 理解偏差导致的布局翻车,顺带把 CSS 与 JS 动态控制也说清楚。
支持通配符SSL证书、多域名证书、IP证书。适配ACME接口, 支持Zerossl、Let's Encrypt和Google等渠道。登录已有账号
2026-05-15 12:15:38 JavaScript JSON格式校验 正则表达式 JSON.parse()
JSON数据满天飞,校验格式是常事。你是否还在尝试用复杂的正则表达式与嵌套的JSON搏斗?小心!正则可能让你陷入陷阱。
揭示为何JSON.parse()是JavaScript中校验JSON格式的黄金标准——它不仅能轻松应对各种嵌套,而且使用简单,准确无误。别再走弯路了,一起来看看如何高效校验!
在JavaScript中,校验输入框中的内容是否为有效的JSON格式是一个常见的需求。
两种主要的校验方法:使用正则表达式和使用JSON.parse()函数,并对比它们的优缺点。
正则表达式是一种强大的文本匹配工具,但在处理嵌套结构时可能会遇到问题。下面是一个尝试匹配JSON格式的正则表达式示例,但请注意,它并不能完美处理所有JSON情况:
// 正则表达式示例(不推荐用于生产环境)
const jsonPattern = /^(?:[^{}]*?\{(?:[^{}]*?\{[^{}]*?\}|[^{}]*?\[[^{}]*?\]|[^{}]*?"(?:[^"\\]|\\.)*?"|[^{}]*?[^,{}\[\]"]+)+?\}|(?:[^{}]*?\[(?:[^{}]*?\{[^{}]*?\}|[^{}]*?\[[^{}]*?\]|[^{}]*?"(?:[^"\\]|\\.)*?"|[^{}]*?[^,{}\[\]"]+)+?\]))$/;
function isValidJSONWithRegex(input) {
return jsonPattern.test(input);
}
// 测试
console.log(isValidJSONWithRegex('{"name": "John", "age": 30}')); // true
console.log(isValidJSONWithRegex('[{"name": "John"}, {"age": 30}]')); // true
console.log(isValidJSONWithRegex('{"name": "John", "age": 30, }')); // false(实际应返回false,但正则可能误判)
问题:正则表达式在处理嵌套结构时容易出错,且难以覆盖所有JSON格式的可能性。
JSON.parse()函数校验JSON格式更可靠的方法是使用JavaScript的JSON.parse()函数来尝试解析输入的字符串。
如果解析成功,则说明输入是有效的JSON格式;如果解析失败,则说明输入不是有效的JSON格式。
function isValidJSON(input) {
try {
JSON.parse(input);
return true;
} catch (e) {
return false;
}
}
// 测试
console.log(isValidJSON('{"name": "John", "age": 30}')); // true
console.log(isValidJSON('[{"name": "John"}, {"age": 30}]')); // true
console.log(isValidJSON('{"name": "John", "age": 30, }')); // false
console.log(isValidJSON('{"name": "John", "age": "thirty"}')); // true
console.log(isValidJSON('{"name": "John", "age": 30, "isStudent": false}')); // true
console.log(isValidJSON('{"name": "John", "age": 30, "isStudent": true}')); // true
console.log(isValidJSON('{"name": "John", "age": null}')); // true
console.log(isValidJSON('{"name": "John", "age": 30, "hobbies": ["reading", "music"]}')); // true
console.log(isValidJSON('{"name": "John", "age": 30, "address": {"province": "Guangdong", "city": "Shenzhen"}}')); // true
console.log(isValidJSON('{"name": "John", "age": 30, "address": {"province": "Guangdong", "city": "Shenzhen", }}')); // false
优点:
为了更准确地校验JSON格式,在JavaScript中,建议使用JSON.parse()函数。这种方法不仅简单易用,而且能够准确处理各种复杂的JSON格式,包括嵌套结构。相比之下,正则表达式虽然强大,但在处理JSON格式校验时显得力不从心,容易出错。
来此加密的DNS代理验证方案(CNAME方式)堪称一绝。你只需在域名解析中设置一次CNAME记录,后续所有证书申请与续期均可自动完成验证,无需反复登录DNS后台,尤其适合多域名、多用户的复杂环境。
记一次因 display:none 和 visibility:hidden 理解偏差导致的布局翻车,顺带把 CSS 与 JS 动态控制也说清楚。
用正则去匹配 JSON 嵌套结构很容易踩坑,JS 自带的 JSON.parse 加 try catch 才是稳妥方案。
本文详细介绍了通过CSS和JavaScript实现`div`元素隐藏的多种技术。深入探讨了CSS中的`display: none`(完全移除)和`visibility: hidden`(保留空间但不可见)两种核心方法,并阐述了JavaScript如何实现元素的动态显示与隐藏。读者将理解不同方法间的差异,并能根据项目需求,精确选择最适合的隐藏策略,提升网页交互体验。
还在为按钮状态切换烦恼吗?本文将以最简单的方式,一步步教你如何用JavaScript改变按钮的颜色和样式。通过为按钮添加点击事件,你将学会如何清除所有按钮的选中状态,并为当前点击的按钮应用独特的选中样式。零基础也能轻松上手,让你的网页交互瞬间生动起来!
“Uncaught ReferenceError: Chart is not defined”是Chart.js开发者的噩梦。本指南将带你全面理解此类JavaScript运行时错误,涵盖库未加载、脚本引用顺序、函数参数使用不当等多种场景。通过实例讲解,助你系统掌握调试技巧,提升代码健壮性,从此轻松驾驭Chart.js图表。