[Javascript] 不要な改行コードやタブやスペースを取り除けるtrim()

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" 利用場面に応じた使い分け、関数の特製をきちんと理解していれば大丈夫ですね。