JavaScriptでURLを置き換える

はじめに

インターネット時代では、ビジネス上のニーズにより Web サイトやアプリケーションの URL を置き換える必要が生じることが多くなり、JavaScript は非常に便利なツールとなっています。この記事では、例を通じて JavaScript 置換 URL の使用法を分析し、読者に JavaScript を深く理解するためのガイダンスを提供します。

Text

JavaScript の URL 置換とは、Web ページの特定の部分を別の URL に置き換えることを指します。この操作は、JavaScript の location オブジェクトを通じて実現できます。ロケーション オブジェクトは、現在のドキュメントの URL 情報にアクセスし、URL のさまざまな部分を抽出して新しい URL を設定できます。 URL を置換する基本的な JavaScript コードの例を見てみましょう。

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

上記のコードでは、location.replace() メソッドを使用して現在の URL を置換し、それが「http://www. baidu.com」にアクセスし、最後に redirect() 関数を呼び出して実行します。

location.replace() メソッドの使用に加えて、location.href メソッドと location.assign() メソッドを使用して URL を置き換えることもできます。これら 2 つのメソッドの機能は同じであり、現在の URL を新しい URL に変更します。

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

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

上記のコードでは、location.href メソッドと location.assign() メソッドで、現在の URL が新しい URL を指すようにすることもできます。

実際のアプリケーションでは、さまざまな状況に応じて動的な URL 置換を実行する必要があることがよくあります。たとえば、入力ボックスを通じてユーザーが入力したコンテンツを取得し、その入力コンテンツをパラメータとして URL に渡して動的置換を実現します。

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

上記のコードでは、まず入力ボックスのコンテンツを ID「searchInput」で取得し、次にプラス記号を使用してそれを新しい URL に結合し、最後に現在の URL に置き換えます。

JavaScript 置換 URL を使用して、ページ ジャンプやリダイレクトを実装することもできます。以下は、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(); // 调用函数

上記のサンプル コードでは、ユーザーが入力したコンテンツを取得し、それをパラメーターとして新しい URL に結合します。リダイレクトします。

結論

JavaScript の URL 置換は、実際のアプリケーションでよく使用される非常に実用的な機能です。この記事のサンプル コードを通じて、読者は JavaScript を使用して URL を置換し、動的置換、ページ ジャンプ、リダイレクトなどの機能を実装する方法をすぐに習得できます。 URL 置換を行う場合は、URL の形式と構文に注意しなければ、正常に置換できず、アクセスできませんので注意してください。

参考

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 ドキュメント。場所 [EB/OL]. (2022-05-23) [2022-06-05]. https://developer.mozilla.org / en-US/docs/Web/API/Location.

以上がJavaScriptでURLを置き換えるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。