如何在 JavaScript 中获取 HTML 页面的名称

当你需要在前端页面上执行某些特定任务时，有时需要获取当前 HTML 页面的名称。下面让我们通过 JavaScript 实现如何获取当前页面的名称。

一、使用 window.location 对象

window.location 对象包含着当前页面的信息，其中包括页面的 URL、主机名、路径以及其他相关信息。要获取当前页面的名称，只需通过 window.location 对象中的 pathname 属性获取页面的路径，然后通过字符串操作方法获取页面名称即可。

// 获取当前页面的名称
var pageName = window.location.pathname.split('/').pop();
console.log(pageName);

在上面的代码中，我们首先通过 pathname 属性获取页面的路径，然后使用 split() 方法将其分解为数组，并使用 pop() 方法从该数组中获取最后一个元素，即页面名称。最后，我们将页面名称打印到控制台中。

二、使用正则表达式

如果你想更加精确地获取页面名称，可以使用正则表达式来匹配页面名称。这种方法通常更加复杂，但可以提供更多的灵活性。

// 使用正则表达式获取当前页面的名称
var pageNameRegex = /\/([^\/]+)\.html$/i;
var matches = pageNameRegex.exec(window.location.pathname);
var pageName = matches ? matches[1] : 'Unknown';
console.log(pageName);

在上面的代码中，我们使用了一个正则表达式来匹配页面名称。该正则表达式首先匹配 URL 的路径部分，并使用捕获组来获取页面名称。如果正则表达式匹配成功，则 exec() 方法返回一个数组，其中第一个元素是匹配到的文本，而后面的元素则是匹配到的每个捕获组中的子串。因此，在我们的例子中，matches[1] 就是我们需要的页面名称。

结论

无论你选择哪种方法，获取 HTML 页面名称的过程都非常简单。通过这篇文章，我们学习了如何使用 JavaScript 来获取当前页面的名称，这可以帮助我们更好地理解和掌握前端开发中的一些基础知识。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28834