CSS与JavaScript隐藏Div元素:深度解析display: none与visibility: hidden及动态控制
本文详细介绍了通过CSS和JavaScript实现`div`元素隐藏的多种技术。深入探讨了CSS中的`display: none`(完全移除)和`visibility: hidden`(保留空间但不可见)两种核心方法,并阐述了JavaScript如何实现元素的动态显示与隐藏。读者将理解不同方法间的差异,并能根据项目需求,精确选择最适合的隐藏策略,提升网页交互体验。
支持通配符SSL证书、多域名证书、IP证书。适配ACME接口, 支持Zerossl、Let's Encrypt和Google等渠道
2026-06-01 08:06:28 JavaScript JSON 校验 JSON.parse 正则表达式
前端时不时就会碰到一个需求:用户在文本框里粘贴或输入一串数据,我们得判断它是不是合法的 JSON。
表单校验、配置解析、数据导入……场景还挺多。
有人第一反应是“写个正则匹配一下吧”。想法很自然,毕竟正则处理字符串匹配是看家本领。可真动起手来才发现,JSON 那套花括号、方括号层层嵌套的结构,想把正则写对实在太费劲了。
下面这个正则是以前在网上看到的一个版本,看起来很唬人,但其实也就只能对付一些简单情况,稍微深一点的嵌套就会翻车:
const jsonPattern = /^(?:[^{}]*?\{(?:[^{}]*?\{[^{}]*?\}|[^{}]*?\[[^{}]*?\]|[^{}]*?"(?:[^"\\]|\\.)*?"|[^{}]*?[^,{}\[\]"]+)+?\}|(?:[^{}]*?\[(?:[^{}]*?\{[^{}]*?\}|[^{}]*?\[[^{}]*?\]|[^{}]*?"(?:[^"\\]|\\.)*?"|[^{}]*?[^,{}\[\]"]+)+?\]))$/;
function isValidJSONWithRegex(input) {
return jsonPattern.test(input);
}
用这个去测 "{"name": "John", "age": 30,}" 这种多了一个逗号的非法 JSON,有时候会误判。更不用说遇到多层嵌套对象、数组里套对象这些常见结构,正则要么漏判要么直接把自己绕进去。
简单说就是:能工作的场景太窄,不值得花时间维护。
其实 JS 早就给了我们最直接的校验方式——JSON.parse()。它本来就是按照 JSON 规范来实现的解析器,能解析就是合法的,不能解析自然会抛异常。我们只需要拿 try catch 包一下:
function isValidJSON(input) {
try {
JSON.parse(input);
return true;
} catch (e) {
return false;
}
}
就这么几行,不管你是简单对象、数组、字符串、数字、布尔值、null,还是嵌套多深的结构,都能准确判断。
测一下就能看出来有多省心:
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": 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 解析器总比手写的正则靠谱;支持任意嵌套结构,再复杂的数据格式都不怕;用起来也简单,一行 JSON.parse 外加 try catch 就完事,几乎零学习成本。
以前也看过有人想在正则那条路死磕到底,去补各种边界条件。但说实话,JSON 规范里有些细节(比如 Unicode 转义、数字格式)用正则去表达非常痛苦,真不如把这活儿交给语言本身。
线上如果因为校验不准确放进了非法数据,后面的逻辑报错排查起来才叫头疼。
所以现在遇到 JSON 格式校验的场合,我基本都直接上 JSON.parse。正则留着一行行看明白还行,落地到项目里还是放过自己吧。
上一篇: 平均精度AP计算方法与目标检测评估详解
本文详细介绍了通过CSS和JavaScript实现`div`元素隐藏的多种技术。深入探讨了CSS中的`display: none`(完全移除)和`visibility: hidden`(保留空间但不可见)两种核心方法,并阐述了JavaScript如何实现元素的动态显示与隐藏。读者将理解不同方法间的差异,并能根据项目需求,精确选择最适合的隐藏策略,提升网页交互体验。
还在为按钮状态切换烦恼吗?本文将以最简单的方式,一步步教你如何用JavaScript改变按钮的颜色和样式。通过为按钮添加点击事件,你将学会如何清除所有按钮的选中状态,并为当前点击的按钮应用独特的选中样式。零基础也能轻松上手,让你的网页交互瞬间生动起来!
想让你的JavaScript数据活起来?本文带你一步步掌握Fisher-Yates洗牌算法,轻松实现数组元素的随机重排。在此基础上,我们还将学习如何将洗牌后的数组巧妙地转换成结构化的对象。体验JavaScript在处理动态数据时的无限可能,每次运行都有新惊喜!
探索ECharts如何将数据可视化提升到新高度!本文详细介绍实现视觉效果卓越的多柱重叠柱状图的完整方案,通过双Y轴、色彩渐变和巧妙的透明度控制,打造出兼具美观与实用性的数据图表,让数据对比不仅清晰,更具艺术感和吸引力。
想要高效处理复杂数据转换?JS `map`方法正是你的理想选择。本文将聚焦`map`在实际前端项目中的应用场景,从数据格式化、列表渲染到API响应处理,通过一系列实用示例,展示如何巧妙运用`map`简化代码、提高开发效率,助你轻松应对各种数据挑战。