0

0

在JavaScript中高效移除大写字母的变音符号

碧海醫心

碧海醫心

发布时间:2025-11-27 16:31:00

|

163人浏览过

|

来源于php中文网

原创

在JavaScript中高效移除大写字母的变音符号

本教程将详细介绍如何在javascript中选择性地移除字符串中大写字母上的变音符号(重音符号),同时保留小写字母上的变音符号。我们将利用`string.prototype.normalize()`方法分解字符,结合正则表达式精确匹配并替换,最终通过重新规范化来获得简洁且符合要求的字符串,避免了逐个字符测试的低效方法。

理解需求:选择性移除变音符号

在处理多语言文本时,我们经常需要对字符进行规范化。一种常见的需求是去除变音符号(diacritics),例如将“À”变为“A”,将“î”变为“i”。然而,特定场景下可能要求只对大写字母执行此操作,而小写字母上的变音符号则需要保留,例如“à”保持为“à”。传统的逐个字符判断和替换方法效率低下且代码冗余,尤其是在处理大量文本时。

核心解决方案:结合规范化与正则表达式

JavaScript提供了一个强大的String.prototype.normalize()方法,它允许我们对字符串进行Unicode规范化。结合正则表达式,我们可以高效地实现选择性移除变音符号的需求。

整个解决方案分为三个主要步骤:

  1. 分解字符 (Normalization Form D - NFD):将带有变音符号的字符分解为基础字符和独立的变音符号。
  2. 匹配并移除大写字母的变音符号:使用正则表达式精确匹配分解后的大写基础字符及其紧随的变音符号,并只保留基础字符。
  3. 重新组合字符 (Normalization Form C - NFC):将处理后的字符重新组合成标准形式。

1. 分解字符:normalize("NFD")

Unicode字符可以有多种表示形式。例如,带有重音的“À”可以作为一个单一的预组合字符(precomposed character),也可以表示为基础字符“A”后面跟着一个独立的重音符号(combining diacritical mark)。normalize("NFD")方法的作用就是将预组合字符分解成其基础字符和一系列的组合标记。

立即学习Java免费学习笔记(深入)”;

例如:

  • "À" 经过 normalize("NFD") 后,会变成 "A\u0300" (其中 \u0300 是重音符号的Unicode码点)。
  • "à" 经过 normalize("NFD") 后,会变成 "a\u0300"。

2. 匹配并移除大写字母的变音符号

在字符被分解为NFD形式后,我们就可以使用正则表达式来定位并移除大写字母上的变音符号。

使用的正则表达式是:([A-Z])[\u0300-\u036f]/g

  • ([A-Z]): 这是一个捕获组,用于匹配并捕获任何大写英文字母(A到Z)。这个捕获组的存在至关重要,因为它允许我们在替换时只保留匹配到的大写字母。
  • [\u0300-\u036f]: 这是一个字符类,用于匹配Unicode范围内的所有“组合用变音符号”(Combining Diacritical Marks)。这些是NFD分解后会紧跟在基础字符后面的变音符号。
  • /g: 全局标志,确保正则表达式匹配字符串中所有符合条件的模式,而不仅仅是第一个。

替换字符串是 ""。这意味着每次匹配到 ([A-Z]) 和其后的 [\u0300-\u036f] 时,我们只用捕获组1(即大写字母本身)来替换整个匹配项,从而有效地移除了变音符号。

VisualizeAI
VisualizeAI

用AI把你的想法变成现实

下载

由于正则表达式明确指定了 [A-Z],因此它只会影响大写字母及其后的变音符号,而小写字母(例如 a\u0300)则不会被匹配和修改。

3. 重新组合字符:normalize("NFC")

经过第二步的替换后,字符串可能仍然处于NFD形式,其中一些字符可能仍然是分解状态(例如,没有被匹配到的小写字母 a\u0300)。为了确保最终输出的字符串是标准的、可读的,我们通常会将其重新规范化为NFC(Normalization Form C)形式。NFC会将基础字符和其组合标记尽可能地重新组合成预组合字符。

例如,如果字符串中包含 a\u0300,normalize("NFC") 会将其变回 à。

示例代码

以下是实现上述逻辑的JavaScript代码:

/**
 * 从字符串中移除所有大写字母上的变音符号,同时保留小写字母上的变音符号。
 *
 * @param {string} inputString 原始输入字符串。
 * @returns {string} 处理后的字符串。
 */
function removeUppercaseAccents(inputString) {
  // 步骤1: 将字符串分解为NFD形式,分离基础字符和变音符号
  const decomposedString = inputString.normalize("NFD");

  // 步骤2: 使用正则表达式匹配大写字母及其后的变音符号,并只保留大写字母
  // ([A-Z]): 捕获大写字母
  // [\u0300-\u036f]: 匹配组合用变音符号
  // $1: 替换为捕获到的大写字母
  const processedString = decomposedString.replace(/([A-Z])[\u0300-\u036f]/g, "$1");

  // 步骤3: 将处理后的字符串重新组合为NFC形式,确保标准表示
  const finalString = processedString.normalize("NFC");

  return finalString;
}

// 原始字符串,包含大写和小写变音字母
const src = "Héllo Wórld ÀÈÌÒÙ àèìòù";

// 调用函数进行处理
const dst = removeUppercaseAccents(src);

console.log("原始字符串:", src);
console.log("处理后字符串:", dst);
// 预期输出:
// 原始字符串: Héllo Wórld ÀÈÌÒÙ àèìòù
// 处理后字符串: Héllo World AEIOU àèìòù

运行结果分析

运行上述代码,你会观察到以下输出:

原始字符串: Héllo Wórld ÀÈÌÒÙ àèìòù
处理后字符串: Héllo World AEIOU àèìòù

从输出中可以看出:

  • Héllo 中的 é 保持不变,因为它是小写字母。
  • Wórld 中的 ó 保持不变,因为它是小写字母。
  • À, È, Ì, Ò, Ù 都被成功地去除了变音符号,变成了 A, E, I, O, U。
  • à, è, ì, ò, ù 都保持不变,因为它们是小写字母。

这完美地符合了我们的需求,高效且精确。

注意事项与总结

  • Unicode支持:此方法依赖于JavaScript对Unicode的良好支持,特别是normalize()方法和Unicode字符范围的正则表达式。
  • 性能:对于绝大多数应用场景,这种方法在性能上是高效的。normalize()和replace()都是原生实现,通常比手写循环和条件判断要快。
  • 字符集范围:[\u0300-\u036f] 涵盖了拉丁语系中常见的组合用变音符号。如果你的应用需要处理其他语言(如希腊语、西里尔语等)的特定变音符号,可能需要调整或扩展这个Unicode范围。
  • NFD/NFC的重要性:正确使用NFD进行分解和NFC进行重新组合是此解决方案成功的关键。NFD确保了变音符号与基础字符分离,便于正则表达式匹配;NFC则确保了最终字符串的标准化和正确显示。

通过结合String.prototype.normalize()和精确的正则表达式,我们能够以一种声明式、高效且优雅的方式,在JavaScript中实现对字符串大写字母变音符号的选择性移除,极大地简化了多语言文本处理的复杂性。

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

554

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

374

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

731

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

477

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

394

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

990

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

656

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

551

2023.09.20

Golang gRPC 服务开发与Protobuf实战
Golang gRPC 服务开发与Protobuf实战

本专题系统讲解 Golang 在 gRPC 服务开发中的完整实践,涵盖 Protobuf 定义与代码生成、gRPC 服务端与客户端实现、流式 RPC(Unary/Server/Client/Bidirectional)、错误处理、拦截器、中间件以及与 HTTP/REST 的对接方案。通过实际案例,帮助学习者掌握 使用 Go 构建高性能、强类型、可扩展的 RPC 服务体系,适用于微服务与内部系统通信场景。

8

2026.01.15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.7万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.2万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号