JavaScript Unicode的长度（星体符号） [英] JavaScript Unicode's length (astral symbols)
问题描述
我有一个 问题在于Unicode特殊字符/星体符号（\u {。 ....}，具有超过4个十六进制/非BMP字符的那些）存储为两个代码单元，因此length属性将返回2而不是1。 （ https://mixmax.com/blog/unicode-woes-in- javascript ） 我想能够得到1的所有符号或2，只要它不混合一些1和一些2，因为我必须对可视文本的大小有一个工作限制。 我认为解决方案在这里： https://mathiasbynens.be/notes/javascript-unicode#accounting-for-astral-symbols 但我不是<在HTML中，每次添加一个字符，我都会做一个 if text.length< x {...} （在JavaScript中）。
$ p
$ b 我的if如下所示： C>如果（的document.getElementById（ 1）。值。长度<16）{
编辑（正在使用！）： p>
< html>
< head>
< style>
input {background：white; border：1px solid; height：30; outline-color：black; position：absolute; top：389; width：30}
< / style>
< script>
<！ -
函数添加（符号）{
if（countSymbols（document.getElementById（1）。value）< 16）{
document.getElementById （1）。value + = symbol}
if（document.getElementById（1）.value.length == 16&& document.getElementById（1）。value ==\ u {1F4BB} \u {1F3AE} \u {1F3C3} \u {1F525} \\\❤\u {1D7CF} \u {1D7D1} \u {1F4B0} \\\❗）{
document.getElementById（1）。style.background =＃00BB00}
if（document.getElementById（1）.value.length == 16&& document.getElementById（ 1）。值！=\u {1F4BB} \u {1F3AE} \u {1F3C3} \u {1F525} \\\❤\u {1D7CF} \u {1D7D1} \ $ {$ b $ document.getElementById（1）。style.background =＃BB0000}
}
函数countSymbols（string）{
var reg exAstralSymbols = / [\\\�-\\\�] [\\\�-\\\�] / g;
返回字符串
//用BMP符号替换每个代理对。
.replace（regexAstralSymbols，'_'）
// ...然后*然后*获得长度。
.length;
}
// - >
< / script>
< / head>
< body>
< input readOnly =trueid =1style =left：573; outline：0; padding：5 8; top：356; width：294>
< input onclick =Add（'\u {1F4BB}'）style =left：573type =buttonvalue =&＃128187>
< input onclick =Add（'\u {1F3AE}'）style =left：606type =buttonvalue =&＃127918>
< input onclick =Add（'\u {1F3C3}'）style =left：639type =buttonvalue =&＃127939>
< input onclick =Add（'\u {1F525}'）style =left：672type =buttonvalue =&＃128293>
< input onclick =Add（'\\\❤'）style =left：705type =buttonvalue =&＃10084>
< input onclick =Add（'\u {1D7CF}'）style =left：738type =buttonvalue =&＃120783>
< input onclick =Add（'\u {1D7D1}'）style =left：771type =buttonvalue =&＃120785>
< input onclick =Add（'\u {1F4B0}'）style =left：804type =buttonvalue =&＃128176>
< input onclick =Add（'\\\❗'）style =left：837type =buttonvalue =&＃10071>
< / body>
< / html>
我认为您已完成大部分研究，只需将所有内容放在一起：
以您的链接提供的功能为例：
函数countSymbols（字符串）{
var regexAstralSymbols = / [\\\�-\\\�] [\\\�-\\\�] / g;
返回字符串
//用BMP符号替换每个代理对。
.replace（regexAstralSymbols，'_'）
// ...然后*然后*获得长度。
.length;
}
您的if应该是
if（countSymbols（document.getElementById（1）。value）< 16）{...}
例如： I have a The problem is that the Unicode special characters/astral symbols (\u{.....}, the ones with more than 4 hex/ non-BMP characters) "are stored as two code units and so the length property will return 2 instead of 1." (https://mixmax.com/blog/unicode-woes-in-javascript) I wanna be able to get 1 for all symbols or 2, as long as it doesn't mix some with 1 and some with 2 because I have to have a working limit on the size of the visual text. I think the solutions is here: https://mathiasbynens.be/notes/javascript-unicode#accounting-for-astral-symbols but I'm not sure how to use that. My if is something like this: Edit (it's working!):
I think you have most of the research done, you only need to put all of it together: Taking the function that your link provides: your if should be For example: 这篇关于JavaScript Unicode的长度（星体符号）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ countSymbols（'< input type="text" > (in HTML) and everytime I add a character I do a if text.length < x {...} (in JavaScript).if(document.getElementById("1").value.length<16){
<html>
<head>
<style>
input{background:white;border:1px solid;height:30;outline-color:black;position:absolute;top:389;width:30}
</style>
<script>
<!--
function Add(symbol){
if (countSymbols(document.getElementById("1").value)<16) {
document.getElementById("1").value+=symbol}
if(document.getElementById("1").value.length==16 && document.getElementById("1").value=="\u{1F4BB}\u{1F3AE}\u{1F3C3}\u{1F525}\u2764\u{1D7CF}\u{1D7D1}\u{1F4B0}\u2757"){
document.getElementById("1").style.background="#00BB00"}
if(document.getElementById("1").value.length==16 && document.getElementById("1").value!="\u{1F4BB}\u{1F3AE}\u{1F3C3}\u{1F525}\u2764\u{1D7CF}\u{1D7D1}\u{1F4B0}\u2757"){
document.getElementById("1").style.background="#BB0000"}
}
function countSymbols(string) {
var regexAstralSymbols = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
return string
// Replace every surrogate pair with a BMP symbol.
.replace(regexAstralSymbols, '_')
// …and *then* get the length.
.length;
}
//-->
</script>
</head>
<body>
<input readOnly="true" id="1" style="left:573;outline:0;padding:5 8;top:356;width:294">
<input onclick="Add('\u{1F4BB}')" style="left:573" type="button" value="💻">
<input onclick="Add('\u{1F3AE}')" style="left:606" type="button" value="🎮">
<input onclick="Add('\u{1F3C3}')" style="left:639" type="button" value="🏃">
<input onclick="Add('\u{1F525}')" style="left:672" type="button" value="🔥">
<input onclick="Add('\u2764')" style="left:705" type="button" value="❤">
<input onclick="Add('\u{1D7CF}')" style="left:738" type="button" value="𝟏">
<input onclick="Add('\u{1D7D1}')" style="left:771" type="button" value="𝟑">
<input onclick="Add('\u{1F4B0}')" style="left:804" type="button" value="💰">
<input onclick="Add('\u2757')" style="left:837" type="button" value="❗">
</body>
</html>
function countSymbols(string) {
var regexAstralSymbols = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
return string
// Replace every surrogate pair with a BMP symbol.
.replace(regexAstralSymbols, '_')
// …and *then* get the length.
.length;
}
if (countSymbols(document.getElementById("1").value)<16) { ...}
countSymbols('
