教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载本文围绕 30 Seconds of Code 仓库中的 find-remove-compact-whitespace 文档系统讲解如何借助正则表达式的\s字符类在 JavaScript 中完成字符串空白字符的**检查check、去除remove与压缩compact**三类核心操作。读完本文你将掌握RegExp.prototype.test()与String.prototype.replace()的搭配用法、与{2,}量词及全局标志g的实践差异并能直接把这些工具函数用于表单校验、文本清洗与排版优化等真实场景。理解空白字符与正则中的\s空白字符whitespace指用于在字符之间提供水平或垂直间距的一类字符包括空格、制表符Tab、换行符\n、回车符\r、换页符与垂直制表符等。它们肉眼不易察觉却是文本处理中最常见的干扰源。在正则表达式中\s用于匹配任意空白字符其反向形式\S匹配任意非空白字符。这是处理空白问题的核心工具仓库中的 正则表达式速查表 也将\s/\S归入字符序列character sequences一类与\w/\W、\d/\D并列\s任意空白字符\S任意非空白字符\s的反向\w任意单词字符\d任意数字字符基于\s及配套的量词与标志我们就可以构造出三类常用函数对应原文档的三个核心小节。检查字符串是否包含空白字符最基础的场景是判断一个字符串中是否存在空白字符典型应用是表单输入校验例如用户名不应包含空格。const containsWhitespace str /\s/.test(str); containsWhitespace(lorem); // false containsWhitespace(lorem ipsum); // true这里用到RegExp.prototype.test()只要字符串中存在任意一处匹配就返回true。注意此场景不需要全局标志g因为我们只关心是否存在而非有多少处。从实现层面看原文档content/snippets/js/s/find-remove-compact-whitespace.md给出的函数以箭头函数 单一表达式形式呈现符合仓库中 ES6 helper 的一贯风格。该函数同时命中了string与regexp两个标签因此它会被收录进 JavaScript String 合集 与 JavaScript 正则表达式合集作为字符串处理工具库的一部分。去除字符串中的所有空白字符当需要彻底删除所有空白字符如生成无空格 token、压缩文本存储时可借助String.prototype.replace()配合全局匹配完成替换。const removeWhitespace str str.replace(/\s/g, ); removeWhitespace(Lorem ipsum.\n Dolor sit amet. ); // Loremipsum.Dolorsitamet.这里有两个关键语法点全局标志g让正则匹配字符串中所有符合条件的片段而不是仅替换第一处量词表示一个或多个即把连续出现的多个空白字符包括换行、多空格等一次性作为一个整体替换为空字符串避免逐一替换带来的多余开销。该模式在仓库中并非孤例。常用正则表达式文档 的 Match whitespace sequences 一节同样给出/\s/g并明确说明其用途使用\s匹配包括空格、Tab、换行在内的任意空白字符用匹配一个或多个连续出现用g匹配全部。/\s/g也因此成为文本清洗中最常见的清除空白惯用法。压缩字符串中的空白序列与彻底删除不同压缩compact的目标是把连续的多余空白替换为单个空格保留可读的单词间距。这在处理用户粘贴的多余空格、缩进文本或排版脏数据时非常实用。const compactWhitespace str str.replace(/\s{2,}/g, ); compactWhitespace(Lorem Ipsum); // Lorem Ipsum compactWhitespace(Lorem \n Ipsum); // Lorem Ipsum这里的核心是量词{2,}表示匹配 2 个及以上配合全局标志g一次性替换所有连续空白序列。与一个及以上的区别在于会把单个空格也纳入匹配——适合删除{2,}只匹配两个及以上的连续空白——适合压缩单个空格原样保留。关于量词语法正则表达式速查表 给出了完整对照量词含义等价写法a?零个或一个aa{0,1}a*零个或多个aa{0,}a一个或多个aa{1,}a{3}恰好 3 个a—a{3,}3 个及以上a—a{3,5}3 到 5 个a含两端—其中a代指任意可量化的表达式。\s{2,}正是{3,}一类下限开放量词的直接应用。组合使用从空白清洗到文本规范化上述三个函数可以在真实项目中组合出更完整的文本规范化工具。例如在compactWhitespace基础上叠加String.prototype.trim()即可得到去首尾 压中间的经典清洗函数const normalizeWhitespace str str.trim().replace(/\s{2,}/g, ); normalizeWhitespace( Lorem ipsum \n dolor ); // Lorem ipsum dolor空白正则在整个仓库的字符串处理体系中广泛复用可以互为印证字符串转 Slugstring-to-slug 使用\s匹配空格并把[\s_-]替换为单个连字符生成 SEO 友好的 URL 片段Word Wrap 文档 在按宽度换行的正则中用\s作为单词边界避免单词被从中间切断Expand Tabs 文档 用/\t/g精确匹配 Tab 字符并替换为指定数量的空格Indent String 文档 结合^锚点与m多行标志逐行插入缩进移除非 ASCII 字符文档 用[^\x20-\x7E]清洗不可打印字符与空白清洗常配合用于文本预处理。可以看出检查 / 删除 / 压缩空白是字符串正则处理的最小单元而\s、量词、{2,}与标志g这三者的组合方式决定了函数是判断、全删还是规整。深入正则基础量词、标志与反向匹配要真正掌握上述三个函数还需理解正则中的两个基础维度——标志flags与反向字符类。正则表达式速查表 列出常用标志g全局Global匹配所有出现m多行Multiline配合^/$匹配每行行首行尾i忽略大小写Case insensitiveuUnicode 模式。本文涉及的三个函数均只用到g。若需要逐行处理如与indentString的m标志结合则需叠加其他标志。反向字符类方面\S匹配任意非空白字符。例如要查找非空白内容的首个位置可搭配\S与\s交替使用更进阶的用法捕获组、前瞻断言、命名组等可参见 6 个 JavaScript 正则特性文档其中前瞻lookahead正是 Word Wrap 文档 在行尾避免换行的关键手段。在 30 Seconds of Code 中的组织方式与获取途径本文涉及的三个函数均收录于仓库的 snippet 体系原文档位于 content/snippets/js/s/find-remove-compact-whitespace.mdFrontmatter 中tags: [string, regexp]表明其归属依标签索引它同时出现在 JavaScript String 合集 与 JavaScript 正则表达式合集 中仓库中全部 JavaScript 字符串与正则 snippet 采用相同的String.prototype.replace() 正则表达式模式阅读 正则速查表、常用正则表达式 等配套文档可以形成完整知识链。在实际项目中可直接把containsWhitespace、removeWhitespace、compactWhitespace三个函数以 ES6 模块形式引入使用。它们无任何依赖、纯函数、输入输出可预期适合作为工具库的最小单元也便于单独测试与复用。小结围绕\s空白字符类本文完整覆盖了 30 Seconds of Code 中的三类核心操作函数正则模式作用containsWhitespace/\s/判断是否含空白test()removeWhitespace/\s/g删除全部空白replace(…, )compactWhitespace/\s{2,}/g连续空白压缩为单个空格掌握\s、/{2,}量词与g标志的组合语义即可应对绝大多数字符串空白处理需求再结合仓库中 trim、slugify、word wrap 等配套案例就能将这些基础函数灵活编织进真实的文本清洗与排版管线。赞分享教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载相关推荐30 Seconds of Code用 JavaScript 正则表达式规范化字符串行结束符Line Endings30 Seconds of Code用 JavaScript 正则表达式规范化字符串行结束符Line Endings 导读 在跨平台开发的日常中文本文件教程文档30 seconds of code用正则表达式在 JavaScript 中校验字符串是否只含字母或字母数字30 seconds of code用正则表达式在 JavaScript 中校验字符串是否只含字母或字母数字 字符串经常被用来承载只应包含字母alpha或教程文档30-seconds-of-code 字符串技巧用正则一步实现多行字符串整体缩进indentString30 seconds of code 字符串技巧用正则一步实现多行字符串整体缩进indentString 本文基于 30 seconds of code教程文档创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考