javascript replace URL

Preface

In the Internet era, websites or applications often need to replace URLs due to business needs. At this time, JavaScript has become a very useful tool. This article will analyze the usage of JavaScript replacement URL through examples and provide readers with guidance on in-depth understanding of JavaScript.

Text

JavaScript URL replacement refers to replacing a certain part of the web page with another URL. This operation can be achieved through the location object in JavaScript. The location object can access the URL information of the current document and can extract various parts of the URL to set a new URL. Let's look at a basic JavaScript code example to replace a URL:

function redirect() {
  location.replace("http://www.baidu.com"); // 替换网址
}
redirect(); // 调用函数

In the above code, the location.replace() method is used to replace the current URL and point it to "http://www. baidu.com", and finally call and execute through the redirect() function.

In addition to using the location.replace() method, you can also use the location.href and location.assign() methods to replace the URL. The functions of these two methods are the same, pointing the current URL to the new URL. .

function redirect() {
  location.href = "http://www.baidu.com"; // 替换网址
}
redirect(); // 调用函数

function redirect() {
  location.assign("http://www.baidu.com"); // 替换网址
}
redirect(); // 调用函数

In the above code, the location.href and location.assign() methods can also point the current URL to a new URL.

In practical applications, we often need to perform dynamic URL replacement according to different situations. For example, obtain the content input by the user through the input box, and then pass the input content as a parameter to the URL to achieve dynamic replacement.

function redirect() {
  var keyword = document.getElementById("searchInput").value; // 获取输入框中的内容
  var newUrl = "https://www.baidu.com/s?wd=" + keyword;
  location.href = newUrl; // 替换新的 URL
}

In the above code, we first obtain the content in the input box with the id "searchInput", then use the plus sign to splice it into a new URL, and finally replace it with the current URL.

JavaScript replacement URLs can also be used to implement page jumps and redirects. The following is a sample code for page jump and redirection through JavaScript:

// 页面跳转
function jumpToPage() {
  var pageNum = document.getElementById("pageNumInput").value;
  var newUrl = "http://www.example.com/page_" + pageNum + ".html";
  location.href = newUrl;
}

// 重定向
function redirect() {
  location.replace("http://www.example.com"); // 重定向到新的网站
}
redirect(); // 调用函数

In the above sample code, we obtain the content entered by the user and then splice it into the new URL as a parameter. Page jumps and redirects.

Conclusion

JavaScript URL replacement is a very practical function that is often used in practical applications. Through the example code in this article, readers can quickly master the use of JavaScript to replace URLs, and implement functions such as dynamic replacement, page jumps, and redirections. It should be noted that when performing URL replacement, you must pay attention to the format and syntax of the URL, otherwise normal replacement and access will not be achieved.

Reference

1. W3school. JavaScript location Object [EB/OL]. (2022-05-28) [2022-06-05]. https://www.w3schools .com/js/js_window_location.asp.
2. MDN Web Docs. Location [EB/OL]. (2022-05-23) [2022-06-05]. https://developer.mozilla.org /en-US/docs/Web/API/Location.

The above is the detailed content of javascript replace URL. For more information, please follow other related articles on the PHP Chinese website!