多语言URL在面包屑菜单中显示为Unicode
我有一个挪威语 url路径，看起来像/om-os/bæredygtighed/socialt-ansvar
在我的BreadCrumb菜单中，我希望看到类似的东西：
> OM OS＆gt; bæredygtighed＆gt; Socialt-Ansvar
但是，æ以％C3％A6出现。因此，我的面包屑看起来像这样：
OM OS＆gt; b％C3％a6redgtighed＆gt; socialt-ansvar
我有＆lt; meta charset =“ utf-8”＆gt;在head中，所以我不确定为什么这些字符还在出现吗？
I have a Norwegian URL path which looks like this /om-os/bæredygtighed/socialt-ansvar
In my breadcrumb menu, I expect to see something like this:
Om os > Bæredygtighed > Socialt-ansvar
However, the æ is appearing as %c3%a6. So my breadcrumb looks like this:
Om os > B%c3%a6redygtighed > Socialt-ansvar
I have <meta charset="utf-8"> in the head, so I'm unsure why these characters are still appearing?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我不知道您如何构建 URL，但是，除了具有不同编码的域之外，URL 的所有非 ASCII 部分都必须进行 URL 编码，又名 百分比编码。如果您不自己执行此操作，浏览器会为您执行此操作。 OTOH，在大多数情况下，浏览器会向您显示角色的未编码版本。您可能不知道通过线路发送的内容是 URL 编码的。
例如，您的路径通过网络发送为
/om-os/b%c3%a6redygtighed/socialt-ansvar，即使您看到/om-os/bæredygtighed/socialt-ansvar<地址栏中的 /code>。用开发者工具检查一下。如果您使用 Firefox，则必须在“网络”选项卡中查看 HTTP 调用详细信息的“标头”选项卡。相反，Chrome 还会向您显示 HTTP 调用的 URL 编码的摘要行。路径中的%c3%a6是组成字符æ的 UTF-8 编码的两个字节 C3 和 A6 的十六进制值。您甚至可以以编程方式将
window.location.pathname设置为/om-os/bæredygtighed/socialt-ansvar，但是当您读取window.location.pathname< /code> 之后，您将得到 URL 编码：我不知道您的路径如何流入面包屑，但您显然可以在使用字符串之前反转 URL 编码。
在 JavaScript 中，您通常使用
decodeURIComponent< /code>()：在 PHP 中，您通常使用
urldecode：但是，如果您可以使数据流在到达面包屑之前避免编码和解码步骤，那就更好了。
I don't know how you are building the URLs, but, except for the domains, that have a different encoding, all non-ASCII parts of a URL must be URL-encoded, AKA percent-encoded. The browser does it for you if you don't do it yourself. OTOH, the browser will in most cases show you the unencoded version of your characters. You might not be aware that what is sent over the wire is URL-encoded.
E.g., your path is sent over the wire as
/om-os/b%c3%a6redygtighed/socialt-ansvar, even if you see/om-os/bæredygtighed/socialt-ansvarin the address bar. Check it with the developer tools. If you use Firefox, you will have to look at the Headers tab of the HTTP call's details in the Network tab. Chrome, instead, will also show you the HTTP call's summary row URL-encoded. That%c3%a6in the path is the hex value of the two bytes, C3 and A6, that make up the UTF-8 encoding of the characteræ.You can even set your
window.location.pathnameprogrammatically to/om-os/bæredygtighed/socialt-ansvar, but when you readwindow.location.pathnameafterwards, you will get it URL-encoded:I don't know how your path flows into your breadcrumbs, but you clearly can reverse the URL-encoding before using your strings.
In JavaScript you normally do that with
decodeURIComponent():In PHP you normally do that with
urldecode:But it would be better if you could make your data flow in a way that avoids the encoding and decoding steps before reaching your breadcrumbs.
如果您尚未弄清楚修复程序 -
仅添加上述答案中已经提到的Walter -Tross的
内容 - （
/om -os/os/bæredygtighed/socialt -ansvar） ）encodeurijs-method输出如下 -/om-os/b％c3％a6redygtighed/socialt-ansvar和
encodeuricomponentjs - 移动输出如下 -％2FOM-OS％2FB％C3％a6redgtighed％2FSocialt-Ansvar。给定上述情况，看来您正在从URL中获取面包屑输入。该行为等于
encodeuri方法，从而使您能够在“/”字符上拆分。如前所述，该修复程序将是使用
decodeuri或decodeuricomponent在将其用作内容之前执行URL-DECODE。If you have not yet figured out the fix -
just to add on top of whatever walter-tross has already mentioned in above answer -
For the given input - (
/om-os/bæredygtighed/socialt-ansvar)the
encodeURIjs-method output is as follows -/om-os/b%C3%A6redygtighed/socialt-ansvarand the the
encodeURIComponentjs-method output is as follows -%2Fom-os%2Fb%C3%A6redygtighed%2Fsocialt-ansvar.Given the above, it appears that you are fetching the bread-crumb input from the URL. And the behaviour is equivalent to
encodeURImethod, thus enabling you to split on the '/' character.The fix, as already noted, would be to perform url-decode using
decodeURIordecodeURIComponenton the individual components prior to using it as content.