javascritpで任意のタグの内容を取得した時に、大量の不要な文字がくっついてくる事があります。
それはHTMLタグの構成で、bootstrapなどを使うと、大量にdivを作ってそれをネストすることで、たくさんの"tab"が取得した文字列に入り込むし、"tab"でなくて半角スペースという状態もたくさん存在します。
改行コードをあまり意識しないHTMLにおいて、コーダーは自由に好きなところで改行をしてしまうため、CRやLFなどのコードも、ふんだんに入り込みます。
とにかくスクレイピングなどをする場合に、不要な文字列を取り除きたい時に便利な"trim()関数"をちゃんと理解して事故のない使い方をしたいと思います。
trim()ってどんな関数？
任意の文字列の先頭と末尾にある"改行"、"タブ"、"スペース"を取り除いてくれて中のstringを不要文字のない状態に整形してくれます。
下記のように文字列(String)のprototypeで構成されているので、簡単に利用する事ができます。
var before = " before";
var after = "after ";
var middle = " middle ";
console.log(before.trim());
console.log(after.trim());
console.log(middle.trim());
> "before"
> "after"
> "middle"
使い方参考ページ
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/trim
利用場面サンプル
WEBページ内のHTMLタグの任意の箇所の内部文字列を取得した時に、エレメントの場所によっては不要な文字がたくさん発生します。
とある情報サイトのヘッダメニューをスクレイピングしようとした時をサンプルとして説明すると、下記のようになります。
var li = document.querySelectorAll(".l-miH04E_list > li");
for(var i=0; i<li.length; i++){
console.log(li[i].textContent);
}
<ul class="l-miH04E_list">
<li class="l-miH04E_listItem">
<a href="/business/startups/">スタートアップ</a></li>
<li class="l-miH04E_listItem">
<a href="/business/house/">住建・不動産</a></li>
<li class="l-miH04E_listItem">
<a href="/business/electronics/">エレクトロニクス</a></li>
<li class="l-miH04E_listItem">
<a href="/business/services/">サービス・食品</a></li>
<li class="l-miH04E_listItem">
<a href="/business/internet/">ネット・IT</a></li>
<li class="l-miH04E_listItem">
<a href="/business/consumer-products/">小売り・外食</a></li>
<li class="l-miH04E_listItem">
<a href="/business/health-care/">ヘルスケア</a></li>
<li class="l-miH04E_listItem">
<a href="/economy/monetary/">金融機関</a></li>
<li class="l-miH04E_listItem">
<a href="/business/mechanical/">自動車・機械</a></li>
<li class="l-miH04E_listItem">
<a href="/business/legal/">法務・ガバナンス</a></li>
<li class="l-miH04E_listItem">
<a href="/business/energy/">環境エネ・素材</a></li>
<li class="l-miH04E_listItem">
未来面</li>
</ul>
スタートアップ
住建・不動産
エレクトロニクス
サービス・食品
ネット・IT
小売り・外食
ヘルスケア
金融機関
自動車・機械
法務・ガバナンス
環境エネ・素材
未来面
通常であれば、上記のような文字列が返ってきますが、これはページのお作法が悪いという訳ではなく、HTMLではこうしたネストは当たり前だと考えなければいけません。
それをtrim()関数を使うと下記のように扱う事ができます。
var li = document.querySelectorAll(".l-miH04E_list > li");
for(var i=0; i<li.length; i++){
console.log(li[i].textContent.trim());
}
スタートアップ
住建・不動産
エレクトロニクス
サービス・食品
ネット・IT
小売り・外食
ヘルスケア
金融機関
自動車・機械
法務・ガバナンス
環境エネ・素材
未来面
上記のようなHTML構成に対して、メニュー文字列を取得する場合、"ul/li/a"の内包文字列を取得すればいいのですが、aタグの無い項目もあるため、"ul/li"のtextContentで取得してみたところ、下記のようになります。
注意点
trim()関数を使う時に気をつけなければいけない点は、不要文字列を取り除くのは、文字列内部には適用されないという事です。
「文字列の先頭と末尾だけの不要文字列を取り除いてくれる」と理解していればいいのですが、文字列全体で不要文字を取り除きたい場合は、replace()関数を使って、全ての場所を対象にしてあげてください。
var before = " bef ore";
var after = "af ter ";
var middle = " mid dle ";
console.log(before.trim());
console.log(after.trim());
console.log(middle.trim());
> "bef ore"
> "af ter"
> "mid dle"
上記で都合が悪い場合は、replaceで文字毎に処理してあげましょう。
var before = " bef ore";
var after = "af ter ";
var middle = " mid dle ";
console.log(before.replace(/ /g, ""));
console.log(after.replace(/ /g, ""));
console.log(middle.replace(/ /g, ""));
> "before"
> "after"
> "middle"
利用場面に応じた使い分け、関数の特製をきちんと理解していれば大丈夫ですね。
