【初心者の備忘録】Javascriptのコードでaタグを更新するのが大変だった話

　Javascriptのコードでhtml上のaタグの更新を行うことについて、割と苦労してしまったので、苦労した点も含めて備忘録として掲載する。

この記事の中でやりたいこと

　この記事の中で作りたい機構というのは、以下のようなものである。

1. JSONファイルの中にあるリンクの文字列を受け取る
2. parseを行い、適切な変数に代入する
3. 更新する対象は、hrefおよび表示する文字列とする(リンクの文字列を表示)
4. html上の特定のaタグを更新する(以下のような書き方をされているものとする)

<a id="received-url" href="#" target="_blank" rel="noopener noreferrer"></a>

　※なお、表示する文字列については「一定の長さ以上になっている場合は、それ以上表示せずに、...という形で省略する」というCSSを書いておくこととする。

aタグ上でJSONのリンク文字列に更新するコード(javascript)

　Pure JavascriptとJQueryのどちらの記法でも、これを再現することは可能であるが、結論から述べると、JQueryの記法を用いた方がシンプルではある。以下にJQueryでそれを実現する関数のコードを示す。

function updateLinkURL(url) {
 $.getJSON(url, function (json) {
   let receivedURL = json.receivedURL;

   // expandedURLを使用してhrefとtextContentを更新
   $("#received-url").attr("href", receivedURL);
   $("#received-url").text(receivedURL);
 });
}

一定の長さ以上の場合に...で省略するCSS(aタグ)

　これのCSSを書いていくにあたって、一つトラップがある。それはaタグにおいて、「display: inline がデフォルトの値である」ということだ。これがあることによって、widthとheightが指定できない。下記の...で省略する書き方をそのまま適用しても効かないのである。

参考サイト
https://zenn.dev/itayuri/articles/51f0004a3bad64

修正前

#received-url {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

　今回適用した解決策としては、「他のサイトへジャンプするリンクである」ことを踏まえると、特にインライン要素である必要が皆無であるため、display: blockを適用する、という方法である。「一定の長さ」というのは場合によるが、今回は「最大でも300pxまで、あとは表示が省略される」という条件を採用した。したがって、以下のように修正できる。

修正後

#received-url {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}

一言

　インライン要素であることを見逃してしまうと、デザインで四苦八苦してしまうので、そういった仕様は覚えていきたい。