クッションページMaker

リンクURLを表示するツール

このツールの仕組み

① ｢リンクを貼りたいURL｣をフォームに入力、または直接URLパラメータに入力。

例 ?link=https://text.sakura.ne.jp/memo/7299950/

② URLパラメータの文字列をJavaScriptで取得。

例 https://text.sakura.ne.jp/memo/7299950/

③ URLパラメータの文字列を<a>タグの中に挿入し、リンクURLを表示。

例 <a href="https://text.sakura.ne.jp/memo/7299950/">https://text.sakura.ne.jp/memo/7299950/</a>

ソースコード【HTML】

<div id="form"><form><input type="text" name="link"><input type="submit" value="表示"></form></div> <div id="cushionlink"></div>

ソースコード【JavaScript】

window.onload = function() { // ** [表示] <div id="cushionlink"></div>に｢リンクURL｣を表示 let cushionlink = document.getElementById("cushionlink"); // ** [条件] URLパラメータがある場合 if (window.location.search){ // ** [取得] URLパラメータの文字を取得 // ** [取得] link=●● let url = window.location.search.split(/\?link\=|\&link\=/)[1]; // ** [条件] URLパラメータに｢リンクURL｣がある場合(直接URLパラメータに入力した場合) if (url.match(/^http(s)\:\/\/[0-9a-zA-Z.-~/?=&+%_():!@]+$/)){ url = url.replace(/\</gim, "&lt;").replace(/\>/gim, "&gt;").replace(/\"/gim, "%22"); // ** [表示] ｢リンクURL｣を<a>タグの中に挿入して表示 url = `下記のサイトに移動します。よろしければクリックしてください。<br><br><a href="${url}">${url}</a>`; // ** [条件] URLパラメータに｢リンクURL｣がある場合(フォームに入力した場合) } else if (url.match(/^http(s)\%3A\%2F\%2F[0-9a-zA-Z.-~/?=&+%_():!@]+$/)){ url = url.replace(/\</gim, "&lt;").replace(/\>/gim, "&gt;").replace(/\"/gim, "%22"); url = url.replace(/\%3A/gim, ":").replace(/\%2F/gim, "/"); // ** [表示] ｢リンクURL｣を<a>タグの中に挿入して表示 url = `下記のサイトに移動します。よろしければクリックしてください。<br><br><a href="${url}">${url}</a>`; // ** [条件] URLパラメータに｢リンクURL｣がない場合 } else { // ** [表示] エラーメッセージを表示 url = `<p><b>【入力エラー】</b><br>｢リンクURL｣を入力してください</p>`; } // ** [表示] <div id="cushionlink"></div>に｢リンクURL｣または｢エラーメッセージ｣を表示 cushionlink.innerHTML = url; // ** [条件] URLパラメータがない場合 } else { // ** [表示] 説明を表示 cushionlink.innerHTML = `<p>ここにリンクURLが表示されます</p>`; } };

このJavaScriptについて

・ 改変は自由です。

・ 配布は自由です。

・ クレジット表記は不要です。

免責事項

・ 当JavaScriptの安全性について、当サイトは保証をいたしません。

・ 当JavaScriptの利用で発生した損害や損失やトラブルについて、当サイトは責任を負わないものとします。