JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでリンクのアンカーテキストの先頭1文字を削除する方法

JavaScriptでリンクのアンカーテキストの先頭文字を削除するには？

ここでは、アンカーテキストに余分な文字が含まれてしまっている「Aabout_us」と「Hhome_page」の2つのリンクを例に解説します。

このような場合、JavaScriptのsubstring(1)メソッドとinnerHTMLプロパティを組み合わせることで、先頭の1文字を取り除き、「about_us」「home_page」という正しい表記で表示させることができます。

substring(1)は文字列のインデックス1（2番目の文字）以降を抽出するメソッドです。これにより先頭の不要な文字だけを簡単に削除できます。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="linkDemo">
<div>
<a href="">Aabout_us</a>
</div>
</div>
<div class="linkDemo">
<div>
<a href="">Hhome_page</a>
</div>
</div>
<script>
    [...document.querySelectorAll('.linkDemo div a')].forEach(obj=>
    obj.innerHTML=obj.innerHTML.substring(1))
</script>
</body>
</html>

上記のコードでは、querySelectorAll('.linkDemo div a')ですべてのリンク要素を取得し、スプレッド構文[...]で配列化したうえで、forEach()を使って各リンクのinnerHTMLをsubstring(1)の結果で書き換えています。

実行方法

上記プログラムを実行するには、ファイル名を「anyName.html」（index.html）として保存し、ファイルを右クリックします。その後、VS Codeエディターのオプションから「Open with Live Server」を選択してください。

出力結果

実行すると、先頭の文字が削除され、以下のように正しい表記でリンクが表示されます。

JavaScriptでリンクのアンカーテキストの先頭1文字を削除する方法

  1. JavaScriptでHTMLキャンバスに描画する方法をわかりやすく解説

    HTMLキャンバス（canvas）への描画は、JavaScriptを使って行います。キャンバスに描画する前に、HTML DOMメソッドのgetElementById()とgetContext()を使用する必要があります。ここでは、JavaScriptでキャンバスに図形を描画する基本的な手順を紹介します。キャンバスに描画する基本手順getElementById()メソッドを使って、HTML内のキャンバス要素を取得します。getContext()メソッドを呼び出して、描画用のオブジェクトを取得します。このオブジェクトが、図形を描くための各種メソッドやプロパティを提供します。取得した描画オブジェクト

  2. JavaScriptでテキストをクリップボードにコピーする方法【サンプルコード付きで解説】

    JavaScriptでテキストをクリップボードにコピーするには？ Webアプリや管理画面などで、「コピー」ボタンをワンクリックするだけでテキストをクリップボードにコピーできれば、ユーザー体験は大きく向上します。JavaScriptを使えば、この機能はごくシンプルなコードで実装できます。 本記事では、document.execCommand(copy) を使った定番の実装方法を、実際に動作するサンプルコードとともにわかりやすく解説します。 サンプルコード 以下は、入力フィールド内のテキストをボタン一つでクリップボードにコピーする完全なHTMLの例です。 <!DOCTYPE html>