马黑黑 发表于 2024-1-24 17:51

字符与Unicode、html实体编码互转

本帖最后由 马黑黑 于 2024-1-24 17:59 编辑 <br /><br /><style>
.wrap p { margin: 10px 0; }
.mama { margin: 20px auto; width: 100%; padding: 10px; display: grid; grid-template-columns: 350px auto 350px; place-items: center; gap: 10px; }
.mama textarea { padding: 10px; width: 320px; height: 200px; resize: none; font-size: 20px; }
mark { background: lightblue; padding: 2px 6px; }
#s2d, #d2s { display: none; }
.wrap input { accent-color: red; }
</style>

<div class="wrap">
        <div>
                <input id="s_u" name="rd" type="radio" value="0" checked /><label for="s_u">字符↔Unicode</label>
                <input id="s_h" name="rd" type="radio" value="1" /><label for="s_h">字符↔html实体</label>
        </div>
        <div class="mama">
                <div><textarea id="txtS" placeholder="普通字符"></textarea></div>
                <div>
                        <p><button id="s2u" title="转Unicode">&gt;&gt;</button></p>
                        <p><button id="u2s" title="Unicode转字符">&lt;&lt;</button></p>
                        <p><button id="s2d" title="转html实体">&gt;&gt;</button></p>
                        <p><button id="d2s" title="html实体转字符">&lt;&lt;</button></p>
                </div>
                <div><textarea id="txtU" placeholder="Unicode编码"></textarea></div>
        </div>
        <p>[说明]</p>
        <p>任意字符均可转为Unicode编码和html实体编码。Unicode编码以<mark>\u编码</mark>方式输出【例：\u1f60a】，html实体编码以<mark>&amp;#编码;</mark>方式输出（例：&amp;#128522;）。</p>
        <p>Unicode转字符支持的编码表达式有：<mark>\u编码</mark>、<mark>+u编码</mark>、<mark>+U编码</mark>、<mark>0x编码</mark>、<mark>0X编码</mark>，无效的编码表达式将保留原样。</p>
        <p>html实体编码转字符支持的编码格式有：有效的<mark>纯数字</mark>【例：128522;】、<mark>带&amp;#前缀的数字</mark>【例：&amp;#128522;】，每一个单位用分号隔开【例：&amp;#128522;&amp;#129426;】</p>
        <p>支持emoji转Unicode和html实体编码，例如：&#128570;&#129449;</p>
</div>

<script>

s2u.onclick = () => txtU.value = str2unicode(txtS.value.trim());
u2s.onclick = () => txtS.value = unicode2str(txtU.value.trim());
s2d.onclick = () => txtU.value = str2unicode(txtS.value.trim(),false);
d2s.onclick = () => txtS.value = dec2str(txtU.value.trim());

.forEach(item => {
        item.onclick = () => {
                item.value === '0' ?
                        (showOrHide(,'block'), showOrHide(,'none'), txtU.setAttribute('placeholder','Unicode编码')) :
                        (showOrHide(,'block'), showOrHide(,'none', txtU.setAttribute('placeholder','html实体')));
                txtU.value = '';
        }
});

var str2unicode = (str,hex=true) => {
        let u = hex ? [...str].map(str => '\\u' + str.codePointAt(0).toString(16)).join('') : [...str].map(str => '&#' + str.codePointAt(0) + ';').join('');
        return u;
}

var unicode2str = (str) => {
        let outstr = '';
        str = str.replaceAll(/(\\u)|(\\U)|(u\+(\s?))|(U\+\s?)/g,'0x');
        var ar = str.split('0x');
        ar.forEach(a => {
                let num = parseInt(a,16);
                outstr += num >= 0 && num <= 0x10FFFF ? String.fromCodePoint(num) : a;
        });
        return outstr;
};

var dec2str = (str) => {
        str = str.replaceAll(/&#|&/g,'');
        let ar = str.split(';'), s = '';
        ar.forEach(item => {
                let num = parseInt(item);
                s += num >= 0 && num <= 1114111 ? String.fromCodePoint(num) : item;
        });
        return s;
};

let rds = document.getElementsByTagName('rd');

var showOrHide = (elms,act='block') => elms.forEach(elm => elm.style.display = act);

</script>

马黑黑 发表于 2024-1-24 17:59

emoji和一些其他特殊符号无法显示，需要转为Unicode或html实体符号。以html为例，我们输入一个emoji笑脸，发布前它是正常的，发布后显示出来的是一串字符，这串字符其实就是html实体编码字符，如果我们使用HTML代码来发这串字符，发布后显示出来的就是正常的emoji图标。

红影 发表于 2024-1-24 18:19

这个有意思，原来汉字都对应着相应的编码。
我输入自己的名字，得到的html实体编码就是红影

红影 发表于 2024-1-24 18:21

好吧，复制出来的编码到帖子里直接就的汉字了呢。这个有趣{:4_187:}

红影 发表于 2024-1-24 18:29

再试个这个&#129449;

红影 发表于 2024-1-24 18:30

马黑黑 发表于 2024-1-24 17:59
emoji和一些其他特殊符号无法显示，需要转为Unicode或html实体符号。以html为例，我们输入一个emoji笑脸， ...

看到了，试了个emoji出来的就是字符，要到html帖子里才能正常出来的吧。
这个号，可以直接查找emoji的字符了。

起个网名好难 发表于 2024-1-24 18:55


马黑黑 发表于 2024-1-24 19:23

本帖最后由 马黑黑 于 2024-1-24 19:24 编辑 <br /><br />红影 发表于 2024-1-24 18:30
看到了，试了个emoji出来的就是字符，要到html帖子里才能正常出来的吧。
这个号，可以直接查找emoji的字 ...

<p>这个要弄清楚什么是HTML，就是发HTML帖子的那种。论坛发帖，默认是ubb模式，要点附加选项里的纯文本+HTML代码才是发的HTML帖子，这个时候，html实体编码字符才会有效。</p>
<p>比如这个：</p>
<p>HTML发帖模式下：&#127856;</p><p><br></p><p>而下面楼那个，直接在常规编辑模式下粘贴</p>

马黑黑 发表于 2024-1-24 19:24

&#127856;

马黑黑 发表于 2024-1-24 19:27

起个网名好难 发表于 2024-1-24 18:55


JS现在使用的是utf-16编码，不过es6已经很强大，虽然string length还是对付不了emoji

马黑黑 发表于 2024-1-24 19:29

红影 发表于 2024-1-24 18:19
这个有意思，原来汉字都对应着相应的编码。
我输入自己的名字，得到的html实体编码就是红影
...

Unicode编码的目标是将全世界所有的文字符号进行统一编码，汉字早就拥有Unicode编码

红影 发表于 2024-1-24 21:09

马黑黑 发表于 2024-1-24 19:23
本帖最后由 马黑黑 于 2024-1-24 19:24 编辑

这个要弄清楚什么是HTML，就是发HTML帖子的那种。论坛发 ...

嗯嗯，看到了，需要勾选才能显示出来呢。{:4_187:}

马黑黑 发表于 2024-1-24 21:10

红影 发表于 2024-1-24 21:09
嗯嗯，看到了，需要勾选才能显示出来呢。

都到了能做HTML帖子了，还能糊涂

红影 发表于 2024-1-24 21:10

马黑黑 发表于 2024-1-24 19:29
Unicode编码的目标是将全世界所有的文字符号进行统一编码，汉字早就拥有Unicode编码

那以后可以借助这个，让全世界的人交流时没有语言障碍了呢。

马黑黑 发表于 2024-1-24 21:14

红影 发表于 2024-1-24 21:10
那以后可以借助这个，让全世界的人交流时没有语言障碍了呢。

早就这样了：任何区域访问中国的网站，只要使用UTF-8编码的，都能正确显示汉字。UTF-8能正确呈现Unicode字符。

红影 发表于 2024-1-24 22:00

马黑黑 发表于 2024-1-24 21:14
早就这样了：任何区域访问中国的网站，只要使用UTF-8编码的，都能正确显示汉字。UTF-8能正确呈现Unicode ...

那可真方便呢{:4_204:}

红影 发表于 2024-1-24 22:01

马黑黑 发表于 2024-1-24 21:10
都到了能做HTML帖子了，还能糊涂

还是有些东西不清楚啊{:4_173:}

马黑黑 发表于 2024-1-24 22:08

红影 发表于 2024-1-24 22:01
还是有些东西不清楚啊

{:4_203:}

马黑黑 发表于 2024-1-24 22:09

红影 发表于 2024-1-24 22:00
那可真方便呢

unicode是上个世纪末就出来的东东

红影 发表于 2024-1-24 22:31

马黑黑 发表于 2024-1-24 22:08


没办法，人笨就是这样{:4_173:}
页: [1] 2 3 4
查看完整版本: 字符与Unicode、html实体编码互转