- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
是否有 String.toLowerCase() 和 String.toUpperCase() 的 JavaScript polyfill 实现,或者 JavaScript 中可以处理 Unicode 字符并在浏览器之间保持一致的其他方法?
执行以下操作将在浏览器中产生不同的结果,甚至在浏览器版本之间(例如 FireFox 54 与 55):
document.write(String.fromCodePoint(223).normalize("NFKC").toLowerCase().toUpperCase().toLowerCase())
在 Firefox 55 中,它为您提供 ss
,在 Firefox 54 中,它为您提供 ß
。
通常这没问题,像 Locales 这样的机制可以处理很多你想要的情况;但是,当您需要跨平台的一致行为时,例如与 google-cloud-firestore 之类的 BaaS 系统交谈它可以极大地简化您实际上是在客户端处理内部数据的交互。
最佳答案
请注意,此问题似乎只影响过时的 Firefox 版本,因此除非您明确需要支持那些旧版本,否则您可以选择完全不打扰。您示例的行为在所有现代浏览器中都是相同的(自 Firefox 发生变化以来)。这个可以验证using jsvu + eshost :
$ jsvu # Update installed JavaScript engine binaries to the latest version.
$ eshost -e '"\xDF".normalize("NFKC").toLowerCase().toUpperCase().toLowerCase()'
#### Chakra
ss
#### V8 --harmony
ss
#### JavaScriptCore
ss
#### V8
ss
#### SpiderMonkey
ss
#### xs
ss
但是你问的是如何解决这个问题,那我们继续吧。
https://tc39.github.io/ecma262/#sec-string.prototype.tolowercase 的第 4 步状态:
Let
cuList
be a List where the elements are the result oftoLowercase(cpList)
, according to the Unicode Default Case Conversion algorithm.
此 Unicode 默认大小写转换算法 在 section 3.13 Default Case Algorithms of the Unicode standard 中指定.
The full case mappings for Unicode characters are obtained by using the mappings from
SpecialCasing.txt
plus the mappings fromUnicodeData.txt
, excluding any of the latter mappings that would conflict. Any character that does not have a mapping in these files is considered to map to itself.[…]
The following rules specify the default case conversion operations for Unicode strings. These rules use the full case conversion operations,
Uppercase_Mapping(C)
,Lowercase_Mapping(C)
, andTitlecase_Mapping(C)
, as well as the context-dependent mappings based on the casing context, as specified in Table 3-17.For a string
X
:
- R1
toUppercase(X)
: Map each characterC
inX
toUppercase_Mapping(C)
.- R2
toLowercase(X)
: Map each characterC
inX
toLowercase_Mapping(C)
.
这是来自 SpecialCasing.txt
的示例,下面添加了我的注释:
00DF ; 00DF ; 0053 0073; 0053 0053; # LATIN SMALL LETTER SHARP S
<code>; <lower>; <title> ; <upper> ; (<condition_list>;)? # <comment>
这一行表示 U+00DF ('ß'
) 小写为 U+00DF (ß
) 大写为 U+0053 U+0053 ( SS
).
这是来自 UnicodeData.txt
的示例,下面添加了我的注释:
0041 ; LATIN CAPITAL LETTER A; Lu;0;L;;;;;N;;;; 0061 ;
<code>; <name> ; <ignore> ; <lower>; <upper>
这一行表示 U+0041 ('A'
) 小写为 U+0061 ('a'
)。它没有明确的大写映射,这意味着它自身大写。
这是来自 UnicodeData.txt
的另一个例子:
0061 ; LATIN SMALL LETTER A; Ll;0;L;;;;;N;; ;0041; ; 0041
<code>; <name> ; <ignore> ; <lower>; <upper>
这一行表示 U+0061 ('a'
) 大写为 U+0041 ('A'
)。它没有明确的小写映射,这意味着它小写到自身。
您可以编写一个脚本来解析这两个文件,读取这些示例之后的每一行,并构建小写/大写映射。然后,您可以将这些映射转换为一个小型 JavaScript 库,该库提供符合规范的 toLowerCase
/toUpperCase
功能。
这看起来工作量很大。根据 Firefox 中的旧行为以及具体发生了什么变化(?),您可能会将工作限制为仅 SpecialCasing.txt
中的特殊映射。 . (根据您提供的示例,我假设在 Firefox 55 中只有特殊的外壳发生了变化。)
// Instead of…
function normalize(string) {
const normalized = string.normalize('NFKC');
const lowercased = normalized.toLowerCase();
return lowercased;
}
// …one could do something like:
function lowerCaseSpecialCases(string) {
// TODO: replace all SpecialCasing.txt characters with their lowercase
// mapping.
return string.replace(/TODO/g, fn);
}
function normalize(string) {
const normalized = string.normalize('NFKC');
const fixed = lowerCaseSpecialCases(normalized); // Workaround for old Firefox 54 behavior.
const lowercased = fixed.toLowerCase();
return lowercased;
}
我编写了一个脚本来解析 SpecialCasing.txt
并生成一个 JS 库,该库实现了上面提到的 lowerCaseSpecialCases
功能(如 toLower
)以及 toUpper
。这是:https://gist.github.com/mathiasbynens/a37e3f3138069729aa434ea90eea4a3c根据您的具体用例,您可能根本不需要 toUpper
及其相应的正则表达式和映射。这是完整生成的库:
const reToLower = /[\u0130\u1F88-\u1F8F\u1F98-\u1F9F\u1FA8-\u1FAF\u1FBC\u1FCC\u1FFC]/g;
const toLowerMap = new Map([
['\u0130', 'i\u0307'],
['\u1F88', '\u1F80'],
['\u1F89', '\u1F81'],
['\u1F8A', '\u1F82'],
['\u1F8B', '\u1F83'],
['\u1F8C', '\u1F84'],
['\u1F8D', '\u1F85'],
['\u1F8E', '\u1F86'],
['\u1F8F', '\u1F87'],
['\u1F98', '\u1F90'],
['\u1F99', '\u1F91'],
['\u1F9A', '\u1F92'],
['\u1F9B', '\u1F93'],
['\u1F9C', '\u1F94'],
['\u1F9D', '\u1F95'],
['\u1F9E', '\u1F96'],
['\u1F9F', '\u1F97'],
['\u1FA8', '\u1FA0'],
['\u1FA9', '\u1FA1'],
['\u1FAA', '\u1FA2'],
['\u1FAB', '\u1FA3'],
['\u1FAC', '\u1FA4'],
['\u1FAD', '\u1FA5'],
['\u1FAE', '\u1FA6'],
['\u1FAF', '\u1FA7'],
['\u1FBC', '\u1FB3'],
['\u1FCC', '\u1FC3'],
['\u1FFC', '\u1FF3']
]);
const toLower = (string) => string.replace(reToLower, (match) => toLowerMap.get(match));
const reToUpper = /[\xDF\u0149\u01F0\u0390\u03B0\u0587\u1E96-\u1E9A\u1F50\u1F52\u1F54\u1F56\u1F80-\u1FAF\u1FB2-\u1FB4\u1FB6\u1FB7\u1FBC\u1FC2-\u1FC4\u1FC6\u1FC7\u1FCC\u1FD2\u1FD3\u1FD6\u1FD7\u1FE2-\u1FE4\u1FE6\u1FE7\u1FF2-\u1FF4\u1FF6\u1FF7\u1FFC\uFB00-\uFB06\uFB13-\uFB17]/g;
const toUpperMap = new Map([
['\xDF', 'SS'],
['\uFB00', 'FF'],
['\uFB01', 'FI'],
['\uFB02', 'FL'],
['\uFB03', 'FFI'],
['\uFB04', 'FFL'],
['\uFB05', 'ST'],
['\uFB06', 'ST'],
['\u0587', '\u0535\u0552'],
['\uFB13', '\u0544\u0546'],
['\uFB14', '\u0544\u0535'],
['\uFB15', '\u0544\u053B'],
['\uFB16', '\u054E\u0546'],
['\uFB17', '\u0544\u053D'],
['\u0149', '\u02BCN'],
['\u0390', '\u0399\u0308\u0301'],
['\u03B0', '\u03A5\u0308\u0301'],
['\u01F0', 'J\u030C'],
['\u1E96', 'H\u0331'],
['\u1E97', 'T\u0308'],
['\u1E98', 'W\u030A'],
['\u1E99', 'Y\u030A'],
['\u1E9A', 'A\u02BE'],
['\u1F50', '\u03A5\u0313'],
['\u1F52', '\u03A5\u0313\u0300'],
['\u1F54', '\u03A5\u0313\u0301'],
['\u1F56', '\u03A5\u0313\u0342'],
['\u1FB6', '\u0391\u0342'],
['\u1FC6', '\u0397\u0342'],
['\u1FD2', '\u0399\u0308\u0300'],
['\u1FD3', '\u0399\u0308\u0301'],
['\u1FD6', '\u0399\u0342'],
['\u1FD7', '\u0399\u0308\u0342'],
['\u1FE2', '\u03A5\u0308\u0300'],
['\u1FE3', '\u03A5\u0308\u0301'],
['\u1FE4', '\u03A1\u0313'],
['\u1FE6', '\u03A5\u0342'],
['\u1FE7', '\u03A5\u0308\u0342'],
['\u1FF6', '\u03A9\u0342'],
['\u1F80', '\u1F08\u0399'],
['\u1F81', '\u1F09\u0399'],
['\u1F82', '\u1F0A\u0399'],
['\u1F83', '\u1F0B\u0399'],
['\u1F84', '\u1F0C\u0399'],
['\u1F85', '\u1F0D\u0399'],
['\u1F86', '\u1F0E\u0399'],
['\u1F87', '\u1F0F\u0399'],
['\u1F88', '\u1F08\u0399'],
['\u1F89', '\u1F09\u0399'],
['\u1F8A', '\u1F0A\u0399'],
['\u1F8B', '\u1F0B\u0399'],
['\u1F8C', '\u1F0C\u0399'],
['\u1F8D', '\u1F0D\u0399'],
['\u1F8E', '\u1F0E\u0399'],
['\u1F8F', '\u1F0F\u0399'],
['\u1F90', '\u1F28\u0399'],
['\u1F91', '\u1F29\u0399'],
['\u1F92', '\u1F2A\u0399'],
['\u1F93', '\u1F2B\u0399'],
['\u1F94', '\u1F2C\u0399'],
['\u1F95', '\u1F2D\u0399'],
['\u1F96', '\u1F2E\u0399'],
['\u1F97', '\u1F2F\u0399'],
['\u1F98', '\u1F28\u0399'],
['\u1F99', '\u1F29\u0399'],
['\u1F9A', '\u1F2A\u0399'],
['\u1F9B', '\u1F2B\u0399'],
['\u1F9C', '\u1F2C\u0399'],
['\u1F9D', '\u1F2D\u0399'],
['\u1F9E', '\u1F2E\u0399'],
['\u1F9F', '\u1F2F\u0399'],
['\u1FA0', '\u1F68\u0399'],
['\u1FA1', '\u1F69\u0399'],
['\u1FA2', '\u1F6A\u0399'],
['\u1FA3', '\u1F6B\u0399'],
['\u1FA4', '\u1F6C\u0399'],
['\u1FA5', '\u1F6D\u0399'],
['\u1FA6', '\u1F6E\u0399'],
['\u1FA7', '\u1F6F\u0399'],
['\u1FA8', '\u1F68\u0399'],
['\u1FA9', '\u1F69\u0399'],
['\u1FAA', '\u1F6A\u0399'],
['\u1FAB', '\u1F6B\u0399'],
['\u1FAC', '\u1F6C\u0399'],
['\u1FAD', '\u1F6D\u0399'],
['\u1FAE', '\u1F6E\u0399'],
['\u1FAF', '\u1F6F\u0399'],
['\u1FB3', '\u0391\u0399'],
['\u1FBC', '\u0391\u0399'],
['\u1FC3', '\u0397\u0399'],
['\u1FCC', '\u0397\u0399'],
['\u1FF3', '\u03A9\u0399'],
['\u1FFC', '\u03A9\u0399'],
['\u1FB2', '\u1FBA\u0399'],
['\u1FB4', '\u0386\u0399'],
['\u1FC2', '\u1FCA\u0399'],
['\u1FC4', '\u0389\u0399'],
['\u1FF2', '\u1FFA\u0399'],
['\u1FF4', '\u038F\u0399'],
['\u1FB7', '\u0391\u0342\u0399'],
['\u1FC7', '\u0397\u0342\u0399'],
['\u1FF7', '\u03A9\u0342\u0399']
]);
const toUpper = (string) => string.replace(reToUpper, (match) => toUpperMap.get(match));
关于javascript - 如何使 toLowerCase() 和 toUpperCase() 在浏览器之间保持一致,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53488013/
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: Recreating a Dictionary from an IEnumerable 在 Dictiona
是否可以使用命令行版本的 ImageMagick 修剪图像(比如带有 alpha 的 PNG),使输出图像的宽度和高度都是偶数(不是奇数)? 准确地说,应该先修剪输出图像,然后用透明像素填充。我需要这
我有一个订单的Map,可以由许多不同的线程访问。我想控制访问,所以考虑以下简单的数据结构+包装器。 public interface OrderContainer { boolean cont
我有以下代码,现在只是 div 中的一个 Logo ,但我正在尝试添加一些导航单元格,稍后我将对其进行样式设置。问题是,我似乎无法让它们与(除此之外) Logo “一致”,它们总是下降到下一行。我做错
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 9 年前。 Improve this qu
有没有办法将种子值传递给 d3-cloud 或其他基于 javascript 的标签云,以使其在页面加载之间保持一致? 我们的客户希望使用标签云作为导航/发现辅助工具,但由于 d3-cloud 会在每
我有一条由用户使用 D3.js 绘制的路径。 我想在我的用户绘制路径上定义一个破折号数组,但是,随着它改变其形状和长度,破折号的行为不一致并且间隙在移动并变得越来越小。 这是一个代码笔: https:
只是为了研究UINavigationBar和UIStatusBar的UI,我把Navigation Bar Style改成了Black,并且取消勾选Bar visibility,即Shows Navi
我最近在我的家用机器 (OSX 10.9) 和我的远程服务器 (Ubuntu 12.04 64 位) 上安装了 unison。 我在这两个地方都安装了 2.40.102 版本。我在我的 Mac 上使用
我正在使用 migrate 创建 SQL 数据库模式并用初始数据填充它。后来使用 SQLAlchemy 来处理这个数据库。 我如何测试我的 SQLAlchemy 模型是否与 migrate 生成的真实
道歉对这一切来说还是新鲜事。我正在创建一个网页,并在两个单独的 div 中将图像和文本并排放置。我已经设法将它们放在页面上我想要的位置,但是当我调整页面大小时,文本会调整大小,但图像不会。我希望文本底
在翻阅Cassandra和HBase的阅读资料时,我发现Cassandra并不一致,但HBase是一致的。没有找到任何合适的阅读 Material 。 有人可以提供有关此主题的任何博客/文章吗? 最佳
我需要计算 MacOS 中文件夹的大小。该尺寸值必须与 Finder 一致。我尝试了几种方法来做到这一点。但结果总是与Finder不同。 以下方法是我尝试过的。 typedef struct{
问:我可以使用 C++ 中的任何编译时机制来自动验证模板类方法集是否从类特化到特化相匹配? 示例:假设我想要一个类接口(interface),它根据模板值专门化具有非常不同的行为: // forwar
我想使用 SelectKBest 选择前 K 个特征并运行 GaussianNB: selection = SelectKBest(mutual_info_classif, k=300) data_t
我想要一个位于页面中央的 div,其中包含一行(两个单词)的 h1 文本,并且该文本与 div 的长度对齐;意思是,字母留出空间(同时保持它们的大小)以占据 div 的整个宽度,并且不要超出 div。
我试图更新我的服务器,所以我通过 ssh 运行以下命令: sudo do-release-upgrade 我收到以下错误: Errors were encountered while processi
我想验证单应矩阵会给出好的结果,而这个 this answer 有答案 - 但是,我不知道如何实现答案。 那么谁能推荐我如何使用 OpenCV 计算 SVD 并验证第一个奇异值与最后一个奇异值的比率是
我最近更新到 cocoapods 0.36 并对内部规范做了一些更改,现在 podspec 不再有效。我用 0.35 验证了此规范的先前版本 (0.3.8),但使用 0.36 失败。很明显 cocoa
我有两个并排设置的 TableView ,我需要它们同时滚动。因此,当您滚动一个时,另一个也会同时滚动。 我进行了一些搜索,但找不到任何信息,但我认为这一定是有可能的。 我的 TableView 都连
我是一名优秀的程序员,十分优秀!