【JavaScriptで文字列取得】URLや特定の文字列をJavaScriptで取得する方法

JavaScriptを使って特定の文字列を取得する

今回はJavaScriptを使って文字列を取得する方法をご紹介していきます。

webサービス開発においては、JavaScriptを使えると非常に便利です。JavaScriptを使いこなせることができれば、開発において手間が掛かるような事もかなり省略できます。

もしJavaScriptについて知識をあまり持っていないという人は、ぜひJavaScriptの知識を深めていきましょう。

それでは、今回の目的の文字列の取得の方法についてご紹介していきます。

文字列の取得は、おそらくwebサービス開発をしたことがある人であれば、必ず経験があるのではないでしょうか。

それぐらい基本的で、使用頻度の高いものです。今回は通常の文字列の取得方法に加えて、URLの取得方法についてもご紹介します。

JavaScriptでURLの文字列を取得する

それではここでは、JavaScriptでURLの文字列を取得する方法を書いていきます。

JavaScriptでURLの文字列を取得するには、こちらの関数を使用します。

var url = location.href ;

これで完了です、例えばこのサイトのトップページに、JavaScriptでこちらを使用すると、

var url = location.href;
console.log(url);

としてconsoleで表示してみると、

この様に、URLが取得できます。

JavaScriptを使ってURLのパラメータを取得する方法

上では、表示されるページのURL全てを取得する方法について書きました。こちらでURLのパラメータ部分のみを取得する方法についてご紹介します。

URLのパラメータとは方法

URLには、ドメイン（名前の様なもの）として機能だけでなく、表示されるページごとに表示内容を区別するために文字列を適切に自動で変更して表示します。

会員制のサイトなどの場合は、自身の専用ページなどの場合は、URLに自分のユーザーIDなどが割り振られる場合が多いです。

またブログサイトなどは、記事ごとにURLを自分で指定しない場合には、URLに自動で割り振られる記事番号がそのままURLに使われる事も多いです。

今、編集しているこのページのURLはこの様に表示されます。

パラメータは基本的に“?=”の後に続く文字列になります。

このURLで言えば、?post=4776&action=edit

がパラメータになります。

開発の際に、このパラメータが重要な意味を持っていて、この値をどうしても使用したい時があります。

そうした時にとても便利です。

パラメータを取得する方法

それでは、パラメータの取得方法について書いていきます。

パラメータの取得には、location.search関数を使います。

コードで書くとこの様になります。

var param = location.search

var param = location.search
console.log(param);

このページでconsoleを使って、paramを表示してみるとこの様になります。

この様にパラメータのみ取得できます。

正規表現を使ってより自由に使いこなす

さてこれまでにURLの取得方法、またパラメータのみを取得する方法を書いてきました。　

どちらもかなりJavaScriptを利用する際に重要なものですが、これをさらに特定の部分に絞って取得する場合には、正規表現というものを使うと、より正確に自分の求める特定部分を抽出できます。

例えば、このURLの場合、

パラメータを取得し、さらに記事番号だけ取得したい、といった場合ですね。

パラメータの取得で、取得できる文字列は

?post=4776&action=edit

ですが、これからさらに記事番号だけとなると、

?post=4776の中の4776になりますね。

こういう時に正規表現を使うと便利です。

正規表現を使用すると、特定の文字の前OO文字、もしくは後の全ての文字など自由に文字を特定できます。

?post=4776&action=edit

でいうと、＆の前の６文字ぐらいを指定し、その中の数字のみを指定することが可能です。その指定した文字をjavascriptで抽出するということが可能です。

正規表現の書き方については、方法がかなり多いので一つの記事でも書ききるのが難しいぐらいです。もし気になる方は是非調べてみましょう。

HTML特定の文字列を取得する方法

さて今までにURLの取得方法についてご紹介してきましたが、HTML内の特定の部分の文字列を取得する事もJavaScriptでできます。

まず、JavaScriptでHTMLの特定の要素を取得するのは、

document.getElementById();

もしくは、

document.getElementsByclassname();　ですね。

そして、要素内の文字列の取得には、textContentを使用します。

例えば、

<div id=text>
<p>Hello</p>
<p>Hello</p>
</div>

といったHTMLがある場合に、

var text = document.getElementById('text');
var gettext = text.textContent;

これで文字列が取得できます、

こちらをgettextをconsole で表示すると、

Hello

Hello

となります。

まとめ

いかがでしょうか。JavaScriptはweb開発にとって不可欠なもので、アニメーションの実装だけでなくこういった便利な使い方もできる優れたフロントエンド言語です。

もしJavaScriptにあまり知識がない人は是非参考にしてください。

javascript関連の記事も他にもあるので、是非そちらもお読みください。