使用javascript处理URL中的中文部分

Posted 2023-05-05

比如这样一段网址 http://www.123.com/我是中国人/china/我是北京人/我.rmvb，我想通过js脚本把中文部分用URLEncode进行转义，即 http://www.123.com/%E6%88%91%E6%98%AF%E4%B8%AD%E5%9B%BD%E4%BA%BA/china/%E6%88%91%E6%98%AF%E5%8C%97%E4%BA%AC%E4%BA%BA/%E6%88%91.rmvb这种形式，求教代码改怎么写才好。

javascript中存在几种对URL字符串进行编码的方法：escape()，encodeURI()，以及encodeURIComponent()。这几种编码所起的作用各不相同。

escape() 方法：
采用ISO Latin字符集对指定的字符串进行编码。所有的空格符、标点符号、特殊字符以及其他非ASCII字符都将被转化成%xx格式的字符编码（xx等于该字符在字符集表里面的编码的16进制数字）。比如，空格符对应的编码是%20。
不会被此方法编码的字符： @ * / +

encodeURI() 方法：
把URI字符串采用UTF-8编码格式转化成escape格式的字符串。
不会被此方法编码的字符：! @ # $& * ( ) = : / ; ? + '

encodeURIComponent() 方法：
把URI字符串采用UTF-8编码格式转化成escape格式的字符串。与encodeURI()相比，这个方法将对更多的字符进行编码，比如 / 等字符。所以如果字符串里面包含了URI的几个部分的话，不能用这个方法来进行编码，否则 / 字符被编码之后URL将显示错误。

不会被此方法编码的字符：! * ( ) '

因此，对于中文字符串来说，如果不希望把字符串编码格式转化成UTF-8格式的（比如原页面和目标页面的charset是一致的时候），只需要使用 escape。如果你的页面是GB2312或者其他的编码，而接受参数的页面是UTF-8编码的，就要采用encodeURI或者 encodeURIComponent。
所以总结为：
如果你是 GB2312 编码，使用 escape 函数

如果你是 UTF8 编码 ，还可以使用 encodeURIComponent 函数

兼容 IE6 IE7 IE8 FF3.5 参考技术A

看图片应该就明白了

参考技术B encodeURI() 直接转就行了

JavaScript - 获取 URL 路径的一部分

【中文标题】JavaScript - 获取 URL 路径的一部分

【英文标题】：JavaScript - Get Portion of URL Path

【发布时间】：2011-10-20 03:50:02

【问题描述】：

使用 JavaScript 从 URL 中提取路径的正确方法是什么？

示例： 我有网址http://www.somedomain.com/account/search?filter=a#top 但我只想得到这部分/account/search

如果有任何可以利用的东西，我正在使用 jQuery。

【参考方案1】：

如果这是 当前 url，则使用 window.location.pathname 否则使用此正则表达式：

var reg = /.+?:\/\/.+?(\/.+?)(?:#|\?|$)/;
var pathname = reg.exec( 'http://www.somedomain.com/account/search?filter=a#top' )[1];

【讨论】：

几乎完美 -- 但与 window.location.pathname 不同的是，它在 Windows 的路径名中不包含驱动器号。

对于即使没有路径名也能工作的正则表达式，请使用：/.+?\:\/\/.+?(\/.+?)?(?:#|\?|)?$/

【参考方案2】：

有一个有用的 Web API 方法叫做URL

const url = new URL('http://www.somedomain.com/account/search?filter=a#top');
console.log(url.pathname.split('/'));
const params = new URLSearchParams(url.search)
console.log(params.get("filter"))

【参考方案3】：

如果你有一个抽象的 URL 字符串（不是来自当前的window.location），你可以使用这个技巧：

let yourUrlString = "http://example.com:3000/pathname/?search=test#hash";

let parser = document.createElement('a');
parser.href = yourUrlString;

parser.protocol; // => "http:"
parser.hostname; // => "example.com"
parser.port;     // => "3000"
parser.pathname; // => "/pathname/"
parser.search;   // => "?search=test"
parser.hash;     // => "#hash"
parser.host;     // => "example.com:3000"

感谢jlong

【参考方案4】：

如果您想获取存储在变量中的部分 URL，我可以推荐 URL-Parse

const Url = require('url-parse');
const url = new Url('https://github.com/foo/bar');

根据文档，它提取了以下部分：

返回的 url 实例包含以下属性：

protocol：URL 的协议方案（例如 http:）。 slashes：一个布尔值，指示协议是否后跟两个正斜杠 (//)。 auth：身份验证信息部分（例如用户名：密码）。 username：基本认证的用户名。 password：基本认证的密码。 host：主机名和端口号。 主机名：没有端口号的主机名。 端口：可选端口号。 路径名：URL 路径。 查询：包含查询字符串的已解析对象，除非解析设置为 false。 哈希：URL 的“片段”部分，包括井号 (#)。 href：完整的网址。 origin：URL 的来源。

【参考方案5】：

window.location.href.split('/');

会给你一个包含所有 URL 部分的数组，你可以像普通数组一样访问它。

或者@Dylan 建议的更优雅的解决方案，只有路径部分：

window.location.pathname.split('/');

【讨论】：

window.location.pathname.split('/');如果您尝试访问超出标准协议和 www 等的 URL 的不同部分，在大多数情况下是一个更优雅的解决方案。

window.location.pathname.split('/').filter(function(v) return v; );将删除 Javascript 1.6 及更高版本的空元素。

【参考方案6】：

内置window.location 对象的一个​​属性将为当前窗口提供该属性。

// If URL is http://www.somedomain.com/account/search?filter=a#top

window.location.pathname // /account/search

// For reference:

window.location.host     // www.somedomain.com (includes port if there is one)
window.location.hostname // www.somedomain.com
window.location.hash     // #top
window.location.href     // http://www.somedomain.com/account/search?filter=a#top
window.location.port     // (empty string)
window.location.protocol // http:
window.location.search   // ?filter=a  

---

更新，对任何 URL 使用相同的属性：

事实证明，这个模式正在被标准化为一个名为URLUtils 的接口，你猜怎么着？现有的window.location 对象和锚元素都实现了该接口。

因此您可以对 任何 URL 使用上述相同的属性 — 只需使用 URL 创建一个锚点并访问属性：

var el = document.createElement('a');
el.href = "http://www.somedomain.com/account/search?filter=a#top";

el.host        // www.somedomain.com (includes port if there is one[1])
el.hostname    // www.somedomain.com
el.hash        // #top
el.href        // http://www.somedomain.com/account/search?filter=a#top
el.pathname    // /account/search
el.port        // (port if there is one[1])
el.protocol    // http:
el.search      // ?filter=a

[1]：浏览器对包含端口的属性的支持不一致，见：http://jessepollak.me/chrome-was-wrong-ie-was-right

这适用于最新版本的 Chrome 和 Firefox。我没有要测试的 Internet Explorer 版本，因此请使用 JSFiddle 示例进行测试。

JSFiddle example

还有一个即将推出的 URL 对象，它将为 URL 本身提供这种支持，而无需锚元素。看起来目前没有稳定的浏览器支持它，但据说它会在 Firefox 26 中出现。When you think you might have support for it, try it out here。

【讨论】：

OP 要求提供“一个 URL”，而不是“窗口的当前 URL”。如果你有一个 url 作为字符串呢？

@JoshNoe 原来你现在可以在锚元素上使用相同的属性。查看更新的答案。

感谢您提供的好信息。我用 IE 9 和 IE 8（使用 IE 9 模拟）进行了测试，两者都可以。当然适用于 Chrome 和 Firefox 最新版本:)