JavaScriptで文字列をトリムしますか?


1304

JavaScriptで文字列をトリミングするにはどうすればよいですか?


290
String.trim()がJavaScript 1.8.1 / ECMAScript 5でネイティブに追加されたことがこの質問に尋ねられてから2年後に言及する価値があります:Firefox 3.5以降、Chrome / Safari 5以降、IE9以降(標準モードのみ)参照scunliffeの答え:stackoverflow.com/a/8522376/8432
wweicker

46
String.trim()Node.jsの追加設定なしでも問題なく動作します。
ブラッド

47
nitpickを実行するにString.trim()は、クラスメソッドであるがES5 / Node.jsに存在しません。代わりにString.prototype.trim()、インスタンスメソッドが存在します。使用法:' foo '.trim()ではなくString.trim(' foo ')
frontendbeauty 2012年

39
OMG、それは2013年で、互換モードのIE9にはStringにtrim()メソッドがありません!
dbrin 2013年

80
jQueryではそれ$.trim(str)が常に利用できることに注目する価値があります。
シグモラル2013年

回答:


893

IE9以降のすべてのブラウザにtrim()は文字列のメソッドがあります。

をサポートしていないブラウザではtrim()MDNの次のポリフィルを使用できます。

if (!String.prototype.trim) {
    (function() {
        // Make sure we trim BOM and NBSP
        var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
        String.prototype.trim = function() {
            return this.replace(rtrim, '');
        };
    })();
}

言った、使用している場合jQuery$.trim(str)また利用可能であり、ハンドルは/ nullに未定義。


これを見てください:

String.prototype.trim=function(){return this.replace(/^\s+|\s+$/g, '');};

String.prototype.ltrim=function(){return this.replace(/^\s+/,'');};

String.prototype.rtrim=function(){return this.replace(/\s+$/,'');};

String.prototype.fulltrim=function(){return this.replace(/(?:(?:^|\n)\s+|\s+(?:$|\n))/g,'').replace(/\s+/g,' ');};

87
jQueryではそれ$.trim(str)が常に利用できることに注目する価値があります。
シグモラル2013年

481

jQueryからのトリムは、すでにそのフレームワークを使用している場合に便利です。

$.trim('  your string   ');

私はjQueryを頻繁に使用する傾向があるため、それを使用して文字列をトリミングするのは自然なことです。しかし、そこにjQueryに対する反発がある可能性はありますか?:)


1
これは空白(改行)のみを削除します.. php trimのように機能しません。文字を
削除

jQuery 3.5.0では、trimメソッドが廃止されました。
ハーバートピーターズ

165

上記には多数の正解がありStringますが、JavaScript のオブジェクトに.trim()ECMAScript 5以降のネイティブメソッドがあることに注意してください。したがって、理想的には、trimメソッドのプロトタイプを作成する場合は、実際にそれが最初に存在するかどうかを確認する必要があります。

if(!String.prototype.trim){  
  String.prototype.trim = function(){  
    return this.replace(/^\s+|\s+$/g,'');  
  };  
}

ネイティブで追加: JavaScript 1.8.1 / ECMAScript 5

したがって、以下でサポートされています。

Firefox:3.5以降

Safari:5以上

Internet Explorer:IE9 +(標準モードのみ!)http://blogs.msdn.com/b/ie/archive/2010/06/25/enhanced-scripting-in-ie9-ecmascript-5-support-and-more .aspx

Chrome:5以上

オペラ:10.5+

ECMAScript 5サポートテーブル:http : //kangax.github.com/es5-compat-table/


128

使用できる実装はたくさんあります。最も明白なものは次のようなものです:

String.prototype.trim = function() {
    return this.replace(/^\s+|\s+$/g, "");
};

" foo bar ".trim();  // "foo bar"


29

私はこの質問が3年前に尋ねられたことを知っていString.trim()ます。今、JavaScriptでネイティブに追加されました。たとえば、次のように直接トリミングできます。

document.getElementById("id").value.trim();

3
これはIEバージョンでは機能しません。できればjQueryメソッド$ .trim(str)を使用してください
Ben Taliadoros


20

わいせつな嫌がらせは、ベンチマーク情報を含む11種類のトリムがあります。

http://blog.stevenlevithan.com/archives/faster-trim-javascript

当然のことながら、正規表現ベースは従来のループよりも低速です。


これが私の個人的なものです。このコードは古いです!私はJavaScript1.1とNetscape 3のためにそれを書きました、そしてそれはそれからほんの少しだけ更新されました。(元々使用されていたString.charAt)

/**
 *  Trim string. Actually trims all control characters.
 *  Ignores fancy Unicode spaces. Forces to string.
 */
function trim(str) {
    str = str.toString();
    var begin = 0;
    var end = str.length - 1;
    while (begin <= end && str.charCodeAt(begin) < 33) { ++begin; }
    while (end > begin && str.charCodeAt(end) < 33) { --end; }
    return str.substr(begin, end - begin + 1);
}

14

ネイティブJavaScriptのメソッドを使用しますString.trimLeft()String.trimRight()String.trim()


String.trim()IE9 +と他のすべての主要ブラウザでサポートされています

'  Hello  '.trim()  //-> 'Hello'


String.trimLeft()およびString.trimRight()非標準ですが、IEを除くすべての主要なブラウザでサポートされています

'  Hello  '.trimLeft()   //-> 'Hello  '
'  Hello  '.trimRight()  //-> '  Hello'


ただし、IEのサポートはポリフィルで簡単です。

if (!''.trimLeft) {
    String.prototype.trimLeft = function() {
        return this.replace(/^\s+/,'');
    };
    String.prototype.trimRight = function() {
        return this.replace(/\s+$/,'');
    };
    if (!''.trim) {
        String.prototype.trim = function() {
            return this.replace(/^\s+|\s+$/g, '');
        };
    }
}

1
@Brad Trueですが、幅広いブラウザがサポートされています。そして、ポリフィルは不整合を処理します。
Web_Designer 2013

1
回答を削除することを検討してください。ここでは、他の回答で5倍カバーされていないものは追加されません。
ブラッド

4
@Brad誰も言及しtrimLeftたり見たりしていませんtrimRight
Web_Designer 2013

1
@Brad可能な場合は、ネイティブJavaScript実装を好みます。その答えはそれ自身lTrim()rTrim()メソッドを構成します。
Web_Designer 2013

1
@Bradそれらは非標準ですが、一部のブラウザーはまだそれらをサポートしているため、それらのブラウザーではポリフィルを作成する必要はありません。
Web_Designer 2013

11
String.prototype.trim = String.prototype.trim || function () {
    return this.replace(/^\s+|\s+$/g, "");
};

String.prototype.trimLeft = String.prototype.trimLeft || function () {
    return this.replace(/^\s+/, "");
};

String.prototype.trimRight = String.prototype.trimRight || function () {
    return this.replace(/\s+$/, "");
};

String.prototype.trimFull = String.prototype.trimFull || function () {
    return this.replace(/(?:(?:^|\n)\s+|\s+(?:$|\n))/g, "").replace(/\s+/g, " ");
};

マット・デュレグから恥知らずに盗まれた。



7

Angular jsプロジェクトからコードをトリムする

var trim = (function() {

  // if a reference is a `String`.
  function isString(value){
       return typeof value == 'string';
  } 

  // native trim is way faster: http://jsperf.com/angular-trim-test
  // but IE doesn't have it... :-(
  // TODO: we should move this into IE/ES5 polyfill

  if (!String.prototype.trim) {
    return function(value) {
      return isString(value) ? 
         value.replace(/^\s*/, '').replace(/\s*$/, '') : value;
    };
  }

  return function(value) {
    return isString(value) ? value.trim() : value;
  };

})();

そしてそれを trim(" hello ")


5

単にコードを使用する

var str = "       Hello World!        ";
alert(str.trim());

ブラウザのサポート

Feature         Chrome  Firefox Internet Explorer   Opera   Safari  Edge
Basic support   (Yes)   3.5     9                   10.5    5       ?

古いブラウザの場合、プロトタイプを追加します

if (!String.prototype.trim) {
  String.prototype.trim = function () {
    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
  };
}

他の人と比較して説明するのに最適な方法ですが、少し変更して、replace関数正規表現を意味します。完全に手に入れられなかった。もう少し正規表現の部分を説明したいですか?
muneeb_ahmed

4

これは非常に簡単な方法です:

function removeSpaces(string){
return string.split(' ').join('');
}

1
この質問が2009年に尋ねられたことに気づきましたか。:D
GrafiCode

5
うん、知ってるよ。しかし、誰かがそれを必要とする場合に備えて、私が知っていることを共有することにしました:)
HenryDev

3
了解しました!物事を学び、共有する精神は常に良いことです!
HenryDev 2015年

3
"hello world"-> "helloworld"
チャーリーバーンズ

2
この答えは間違っています。trim先頭と末尾の空白(タブやその他の文字を含む)のみを削除する必要があります。代わりに、中央のスペースを含むすべてのスペースが削除されます。
mbomb007 2018

4

ネイティブのStringを使用trim()するのが最も簡単な方法です。

const fullName = "       Alireza Dezfoolian     ";
const trimmedFullName = fullName.trim();

console.log(trimmedFullName);



2

今日、ほとんどすべてのブラウザがサポートしています String.prototype.trim()

次のように使用します。

var origStr = '   foo  ';
var newStr = origStr.trim(); // Value of newStr becomes 'foo'

この機能をサポートしていない古いブラウザをサポートする必要がある場合は、MDNによって提案されたポリフィルです。

if (!String.prototype.trim) {
    String.prototype.trim = function () {
       return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
    };
}

1

トリムを使用するlibがあります。次のコードを使用して解決しました。

String.prototype.trim = String.prototype.trim || function(){ return jQuery.trim(this); };

1
これは良い解決策ではありません。jQueryの2つのインスタンスがロードされる場合を考えます(タグを使用する一般的なシナリオ)。jQueryの2番目のインスタンスが読み込まれると、その.trim()メソッドString.prototype.trimは既にに設定されているネイティブと同じメソッドに設定されreturn jQuery.trim(this)、スタックオーバーフローが作成されます。
Brad M

1
if(!String.prototype.trim){  
  String.prototype.trim = function(){  
    return this.replace(/^\s+|\s+$/gm,'');  
  };  
}

以前の回答とは異なり、フラグの追加は異なります mます。

フラグmは、いくつかの線形のテキストを検索します。このモードでは、パターンの開始と終了のマーク(^ $)が改行文字(\n)の前後に挿入されます。


1

プレーンなJavaScriptを使用してそれを行うことができます:

function trimString(str, maxLen) {
if (str.length <= maxLen) {
return str;
}
var trimmed = str.substr(0, maxLen);
return trimmed.substr(0, trimmed.lastIndexOf(' ')) + '…';
}

// Let's test it

sentenceOne = "too short";
sentencetwo = "more than the max length";

console.log(trimString(sentenceOne, 15));
console.log(trimString(sentencetwo, 15));

1

次に、JavaScriptでtrim()ビルドします。

let yourName = ' something   ';
let actualTrimmedName = yourName.trim();

コンソールまたは印刷コードのみの場合、名前もトリミングされます。


新しい情報を追加しない回答を投稿する前に、質問のコメントを必ず読んでください。上位のいくつかのコメントはすべてこれを説明/議論しており、多数の賛成票があります。これらのコメントはほぼ8年前のもので、質問自体はほぼ11年前のものです。
ロスガーバット

0

ここでどのバグを隠すことができるかわかりませんが、私はこれを使用します:

var some_string_with_extra_spaces="   goes here    "
console.log(some_string_with_extra_spaces.match(/\S.*\S|\S/)[0])

または、これにテキストが含まれる場合、次のように入力します。

console.log(some_string_with_extra_spaces.match(/\S[\s\S]*\S|\S/)[0])

別の試み:

console.log(some_string_with_extra_spaces.match(/^\s*(.*?)\s*$/)[1])

0

ここではTypeScriptにあります:

var trim: (input: string) => string = String.prototype.trim
    ? ((input: string) : string => {
        return (input || "").trim();
    })
    : ((input: string) : string => {
        return (input || "").replace(/^\s+|\s+$/g,"");
    })

ネイティブプロトタイプが利用できない場合、正規表現にフォールバックします。


0

2008年にJSで.trim()関数が利用できなくなったときに、トリム用にこの関数を記述しました。古いブラウザーの一部は、まだ.trim()関数をサポートしていません。この関数が誰かに役立つことを願っています。

トリム機能

function trim(str)
{
    var startpatt = /^\s/;
    var endpatt = /\s$/;

    while(str.search(startpatt) == 0)
        str = str.substring(1, str.length);

    while(str.search(endpatt) == str.length-1)
        str = str.substring(0, str.length-1);   

    return str;
}

説明:関数trim()はストリング・オブジェクトを受け入れ、開始および末尾の空白(スペース、タブ、および改行)を削除し、トリムされたストリングを戻します。この関数を使用してフォーム入力をトリムし、有効なデータが送信されるようにすることができます。

この関数は、例として次のように呼び出すことができます。

form.elements[i].value = trim(form.elements[i].value);

-4

私は、1つの正規表現を使用してトリミングが必要なケースを探し、その正規表現の結果を使用して目的の部分文字列の境界を決定します。

var illmatch= /^(\s*)(?:.*?)(\s*)$/
function strip(me){
    var match= illmatch.exec(me)
    if(match && (match[1].length || match[2].length)){
        me= me.substring(match[1].length, p.length-match[2].length)
    }
    return me
}

これに関する設計上の決定の1つは、部分文字列を使用して最終的なキャプチャを実行することでした。s / \?://(中期的なキャプチャを行う)で、置換フラグメントは次のようになります。

    if(match && (match[1].length || match[3].length)){
        me= match[2]
    }

これらの実装には、2つのパフォーマンスベットがあります。

  1. 部分文字列の実装は元の文字列のデータをコピーしますか?もしそうなら、最初に、文字列をトリミングする必要があるとき、最初に正規表現(うまくいけば部分的かもしれません)で、そして2番目に部分文字列抽出で、二重トラバーサルがあります。うまくいけば、部分文字列の実装は元の文字列のみを参照するので、部分文字列のような操作はほぼ自由になる可能性があります。クロスフィンガー

  2. 正規表現でのキャプチャはどの程度優れていますか?中期的な出力値は、非常に長くなる可能性があります。すべての正規表現のキャプチャが数百KBの入力キャプチャで失敗しないことを証明する準備ができていませんでしたが、テストも行いませんでした(ランタイムが多すぎる、申し訳ありません!)。2番目は常にキャプチャを実行します。エンジンがヒットせずにこれを行うことができる場合、おそらく上記の文字列ローピング技術のいくつかを使用して、必ずITを使用してください。


-7

IE9 +およびその他のブラウザーの場合

function trim(text) {
    return (text == null) ? '' : ''.trim.call(text);
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.