JS获取当前网址、主机地址项目根路径

yizhihongxing

获取当前网址、主机地址、项目根路径这些信息,常用于前端框架的开发中,例如:设置cookie、动态加载CSS、JS等资源、Ajax请求API等。

获取当前网址

我们可以使用 window.location 对象来获取当前网址,window.location.href 属性可返回当前页面的完整URL,包括协议、主机名、路径和查询部分。

const currentUrl = window.location.href;
console.log(currentUrl);

输出示例:

https://example.com/path/to/page.html?id=123

获取主机地址

window.location.host 属性可返回URL中的主机部分(包括端口号)。

const currentHost = window.location.host;
console.log(currentHost);

输出示例:

example.com

获取项目根路径

项目根路径通常指的是站点的根目录。例如,站点的根目录为 https://example.com/myApp/,则 myApp/ 即是项目的根路径。我们可以通过 window.location.pathname 属性获取当前URL的路径部分,再去掉路径中的文件名,即可得到项目的根路径。

const currentPath = window.location.pathname;
const currentPathArr = currentPath.split('/');
const rootPath = currentPathArr[1] ? '/' + currentPathArr[1] + '/' : '/';
console.log(rootPath);

输出示例:

/myApp/

另外,我们还可以使用正则表达式来获取项目根路径:

const regExp = /^\/[^\/]+/;
const rootPath = currentPath.match(regExp)[0];
console.log(rootPath);

例如,对于URL https://example.com/myApp/path/to/page.html,以上方法将返回 /myApp

以上就是获取当前网址、主机地址、项目根路径的完整攻略,希望对你有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS获取当前网址、主机地址项目根路径 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • JS常用正则表达式及验证时间的正则表达式

    JS常用正则表达式及验证时间的正则表达式 一、常用正则表达式 1. 邮箱验证正则表达式 /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/ 该正则表达式验证邮箱是否合法,以多段分别用@和.连接。 [a-zA-Z0-9_-]+表示特殊字符_-、数字、大小写字母可以重复出现一次或多次。 (\.[a-zA-Z0…

    JavaScript 2023年6月10日
    00
  • JavaScript中常见的高阶函数总结

    高阶函数是指接受另一个函数作为参数,或者返回一个函数作为结果的函数。在JavaScript中,高阶函数被广泛地使用于函数式编程、回调函数和事件驱动编程等场景中。以下是JavaScript中常见的高阶函数总结。 map() map() 方法创建一个新的数组,其结果是该数组中的每个元素都是在调用原始数组上的指定函数后的返回值。 const array1 = [1…

    JavaScript 2023年5月27日
    00
  • js下关于onmouseout、事件冒泡的问题经验小结

    下面我将详细讲解js下关于onmouseout、事件冒泡的问题经验小结的完整攻略。 什么是onmouseout事件 onmouseout事件是一种事件类型,它在鼠标离开某个元素的时候被触发。可以使用onmouseout事件来执行一些操作,如显示提示信息、更改样式等。 什么是事件冒泡 事件冒泡是指事件在触发后,会从最内层元素开始依次向外层元素进行传递,直到传递…

    JavaScript 2023年6月10日
    00
  • 详解前端路由实现与react-router使用姿势

    前端路由是指通过修改浏览器的URL地址,来实现页面内容的变化,而不是像传统的后端路由那样通过访问不同的URL地址展现不同的页面。 如何实现前端路由 在实现前端路由过程中,需要使用到 HTML5 History API。下面是具体的实现步骤: 在 HTML 文件中添加一个 <div> 元素,该元素将用于渲染路由组件。 <div id=&quo…

    JavaScript 2023年6月11日
    00
  • js获取对象、数组的实际长度,元素实际个数的实现代码

    获取对象、数组的实际长度和元素实际个数是 JavaScript 开发中常见的需求,下面是实现代码的完整攻略。 获取对象实际长度的代码 JavaScript 中获取对象实际长度的方法与获取数组长度的方法是相似的,可以利用 Object.keys() 函数和 for…in 循环来实现。这里我们提供两种方法: 方法一:利用 Object.keys() 函数 c…

    JavaScript 2023年5月27日
    00
  • js获取字符串最后一位方法汇总

    JS获取字符串最后一位方法汇总 在JS开发过程中,获取字符串最后一位是一个很常见的需求。下面将对常见的获取字符串最后一位的方法进行汇总并做详细讲解。 方法一:使用字符串的slice方法 使用字符串的slice方法可以获取字符串从指定位置开始到指定位置结束的子串,当指定结束位置为-1时,即可得到字符串的最后一个字符。 var str = ‘hello’; va…

    JavaScript 2023年5月28日
    00
  • JavaScript快速入门(二)

    文件中引入JavaScript 嵌入到HTML文件中 在body或者head中添加script标签 <script> var age = 10; console.log(age); </script> 引入js文件 创建一个js文件 var age = 20; console.log(age); 在html文件中src引入改文件 &l…

    JavaScript 2023年4月18日
    00
  • javascript 词法作用域和闭包分析说明

    Javascript 词法作用域和闭包分析说明 什么是词法作用域 Javascript 的词法作用域是指一个变量的作用范围仅限于它所在的代码块内部。也就是说,一个变量的作用域由它在代码中的位置决定。 举个例子: var a = 1; function foo() { var b = 2; console.log(a, b); // 1, 2 } foo();…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部