まえおき

この記事は、投稿数を確保するために日付を適当な時期に編集して書いてあります。
これまでの記事には書いてなかったかもしれませんが、投稿日は2023/05/16です。

本編

別に何も難しいことではないのです。何でこんな事で1時間近くあれじゃないこれじゃない、console.log(xxx)、、、うーむ、来てる、、、なぜ変わらないと悩んでしまいましたので戒めとして書き残しておく次第です。

流れとしてはこんな感じです。

  1. 記事中にあるテキストからそれらしい所を抜き取る
  2. 抜き出すにはmatchで、そのmatchしたものをforで回して関数に送りreplaceして戻す

これだけのことです。細かいことは書きません。

function replaceText(urlText) {
  let text;
  text = urlText.replace(/http\S.+/g, "<a href="+$1+">$1</a>");
  return text;
}

こういうものがあったわけですよ。urlTextはmatchしたものをforでループさせて取り出したものです。もちろんnullは弾いてます。そこで、let convertedText = replaceText(match[i]);まぁこんな感じで関数に送ったとします。

そうすると、関数の方で、match[i]の値がurlTextに入ります。これはurlかどうかはわかりませんがurlっぽい何かです。なので、関数内で、再度replaceを正規表現でやって(ここの正規表現は本来は厳格に判定が必要。まぁ例ですので)、replaceでurlが見つかった場合は、その後のaタグの部分でアドレスとテキスト部に入れてリンク化してできたものを元送ったconvertedTextに戻すという感じです。

で、記事内でmatchさせた何かがちゃんと送れているか、関数内のtextあたりの前で、console.log(urlText)ってやるわけです。そしたらもちろん元のテキストは来てるわけです。

そうだよ来てるんだよと。

で、元のconvertedTextを同じく見てみると、<a href="$1">$1</a>。何故じゃと小一時間悩んでしまいました。

あれやったりこれやったり別のことやったりで集中していない自分も悪いわけですが、MDNのマニュアルまで見に行きましたよ。何でじゃ、なぜ変わらないと。アドレスが$1の所に入るはずやんともう色んな所を見直しました。

結果、urlText.replace(/http\S.+/g, /http\S.+/…

/http\S.+/………、、、グループにしてねぇ。な、なんで、こ、こんなことが。

$1が変わる訳ありませんやん。何をどうしたら変わるんですかと。$1が何かがわかりませんやんと。なんでそんな当たり前なことを小一時間も。途中で、AKBの動画を見て気持ちを落ち着けましたらわかりました。ありがとうAKB。

Youtube開いたらたまたま出てたやつだっただけのものですが。

そんなわけで、正しくは/(http\S.+)/gとカッコで囲みましょう。そしたらそこが$1になります。