Czy przyciąć ciąg w JavaScript?

1304

Jak przyciąć ciąg w JavaScript?

Vinod
źródło
290
Warto wspomnieć dwa lata po zadaniu tego pytania, że ​​String.trim () został dodany natywnie w JavaScript 1.8.1 / ECMAScript 5, obsługiwany w: Firefox 3.5+, Chrome / Safari 5+, IE9 + (tylko w trybie Standard!) Zobacz Odpowiedź Scunliffe'a: stackoverflow.com/a/8522376/8432
wweicker
46
String.trim()działa również dobrze po wyjęciu z pudełka w Node.js.
Brad
47
Aby nitpick: String.trim()metoda klasy nie istnieje w ES5 / Node.js; zamiast String.prototype.trim()tego istnieje metoda instancji. Zastosowanie:, ' foo '.trim()nie String.trim(' foo ').
frontendbeauty
39
OMG, jest 2013 i IE9 w trybie kompatybilności nie ma metody trim () na String!
dbrin
80
Warto zauważyć, że w jQuery $.trim(str)jest zawsze dostępny.
Sygmoral

Odpowiedzi:

893

Wszystkie przeglądarki od IE9 + mają trim()metodę ciągów.

W przypadku przeglądarek, które nie obsługują trim(), możesz użyć tego wypełnienia z 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, '');
        };
    })();
}

To powiedziawszy, jeśli używasz jQuery, $.trim(str)jest również dostępne i obsługuje niezdefiniowane / null.


Zobacz:

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,' ');};
Pradeep Kumar Mishra
źródło
87
Warto zauważyć, że w jQuery $.trim(str)jest zawsze dostępny.
Sygmoral
481

Przycinanie z jQuery jest wygodne, jeśli już używasz tego frameworka.

$.trim('  your string   ');

Często używam jQuery, więc przycinanie za pomocą niego znaków jest dla mnie naturalne. Ale możliwe, że istnieje reakcja na jQuery? :)

barneytron
źródło
1
to tylko przycina białe znaki (nowa linia) .. nie działa jak przycinanie php, w którym możesz również przycinać postacie
Jeffz
jQuery 3.5.0 amortyzowało metodę przycinania.
Herbert Peters
165

Chociaż powyżej znajduje się kilka poprawnych odpowiedzi, należy zauważyć, że Stringobiekt w JavaScript ma natywną .trim()metodę od ECMAScript 5 . Dlatego idealnie byłoby, gdyby każda próba prototypowania metody przycinania naprawdę sprawdziła, czy już istnieje.

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

Dodano natywnie w: JavaScript 1.8.1 / ECMAScript 5

Tak obsługiwane w:

Firefox: 3.5+

Safari: 5+

Internet Explorer: IE9 + (tylko w trybie Standardowym!) Http://blogs.msdn.com/b/ie/archive/2010/06/25/enhanced-scripting-in-ie9-ecmascript-5-support-and-more .aspx

Chrome: 5+

Opera: 10.5+

Tabela obsługi ECMAScript 5: http://kangax.github.com/es5-compat-table/

scunliffe
źródło
128

Istnieje wiele implementacji , których można użyć. Najbardziej oczywistym wydaje się być coś takiego:

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

" foo bar ".trim();  // "foo bar"
Gumbo
źródło
29

Wiem, że to pytanie zostało zadane trzy lata temu. Teraz String.trim()zostało natywnie dodane w JavaScript. Na przykład można przyciąć bezpośrednio w następujący sposób,

document.getElementById("id").value.trim();
Vijin Paulraj
źródło
3
Nie zadziała to np. W wersjach, jeśli możesz, użyj jQuery metd $ .trim (str)
Ben Taliadoros
22

Jeśli używasz jQuery, użyj jQuery.trim()funkcji. Na przykład:

if( jQuery.trim(StringVariable) == '')
Dostępny alias
źródło
20

Rażące Badassery ma 11 różnych wykończeń z informacjami porównawczymi:

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

Nic dziwnego, że oparte na wyrażeniach regularnych są wolniejsze niż tradycyjna pętla.


Oto mój osobisty. Ten kod jest stary! Napisałem go dla JavaScript 1.1 i Netscape 3 i od tego czasu jest tylko nieznacznie aktualizowany. (Oryginał użył 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);
}
Tero
źródło
14

Użyj metod Język JavaScript: String.trimLeft(), String.trimRight(), i String.trim().


String.trim()jest obsługiwany w IE9 + i wszystkich innych głównych przeglądarkach :

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


String.trimLeft()i String.trimRight()są niestandardowe, ale są obsługiwane we wszystkich głównych przeglądarkach oprócz IE

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


Obsługa IE jest łatwa dzięki wielopełniaczowi:

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, '');
        };
    }
}
Projektant stron internetowych
źródło
1
@Brad Prawda, ale nadal mają szeroką obsługę przeglądarki. I polyfill usuwa wszelkie niespójności.
Web_Designer
1
Powinieneś rozważyć usunięcie swojej odpowiedzi. Nie dodaje niczego, co nie zostało jeszcze pokryte 5x innymi odpowiedziami już tutaj.
Brad
4
@Brad Nikt nie wspominał trimLeftani trimRight.
Web_Designer,
1
@Brad Wolę natywną implementację JavaScript, jeśli jest dostępna. Ta odpowiedź składa się z własnych metod lTrim()i rTrim()metod.
Web_Designer,
1
@Brad Są niestandardowe, ale niektóre przeglądarki nadal je obsługują, więc w tych przeglądarkach nie ma potrzeby tworzenia wielopełniacza.
Web_Designer
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, " ");
};

Bezwstydnie skradziony Mattowi Dueregowi .

yckart
źródło
7

Przytnij kod z projektu kątowego 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;
  };

})();

i nazwać to jak trim(" hello ")

rab
źródło
5

użyj po prostu kodu

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

Obsługa przeglądarki

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

Do starej przeglądarki dodaj prototyp

if (!String.prototype.trim) {
  String.prototype.trim = function () {
    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
  };
}
Behnam Mohammadi
źródło
najlepszy sposób na wyjaśnienie w porównaniu do innych. ale zmodyfikuj to trochę bardziej, mam na myśli replacefunkcję regexp. nie zrozumiałem tego całkowicie. czy chciałbyś wyjaśnić to trochę bardziej w wyrażeniu regularnym?
muneeb_ahmed
4

Oto bardzo prosty sposób:

function removeSpaces(string){
return string.split(' ').join('');
}
HenryDev
źródło
1
zdajesz sobie sprawę, że to pytanie zostało zadane w 2009 roku, prawda? : D
GrafiCode,
5
Tak, wiem. Ale postanowiłem podzielić się tym, co wiem, na wypadek, gdyby ktoś tego potrzebował :)
HenryDev,
3
masz to! duch uczenia się i dzielenia się rzeczami jest zawsze dobrą rzeczą!
HenryDev,
3
„hello world” -> „helloworld”
Charlie Burns
2
Ta odpowiedź jest zła. trimpowinien usuwać tylko początkowe i końcowe białe spacje (które obejmują tabulatory i inne znaki). Zamiast tego usuwa wszystkie spacje, w tym te na środku.
mbomb007
4

Używanie trim()na String, który jest rodzimy, może być najłatwiejszym sposobem:

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

console.log(trimmedFullName);

Alireza
źródło
3

Możesz po prostu zadeklarować zmienną jako ciąg i użyć jej funkcji przycinania:

var str = new String('my string'); 
str= str.trim();
Anahit Serobyan
źródło
2

Obecnie prawie każda przeglądarka obsługuje String.prototype.trim().

Używasz go w ten sposób:

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

W przypadku, gdy nadal będziesz musiał obsługiwać starą przeglądarkę, która nie obsługuje tej funkcji, jest to polifill sugerowany przez MDN:

if (!String.prototype.trim) {
    String.prototype.trim = function () {
       return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
    };
}
John Slegers
źródło
1

Mam bibliotekę, która korzysta z przycinania. rozwiązał to za pomocą następującego kodu.

String.prototype.trim = String.prototype.trim || function(){ return jQuery.trim(this); };
Zesar
źródło
1
To nie jest dobre rozwiązanie. Rozważ przypadek, w którym załadowane są dwa wystąpienia jQuery (typowy scenariusz z tagami). Gdy druga instancja jQuery ładuje się, ustawi jej .trim()metodę na równą natywnej, String.prototype.trimktóra została już ustawiona return jQuery.trim(this), tworząc przepełnienie stosu.
Brad M
1
if(!String.prototype.trim){  
  String.prototype.trim = function(){  
    return this.replace(/^\s+|\s+$/gm,'');  
  };  
}

Od poprzednich odpowiedzi różni się dodawanie flagi m.

Flaga m przeszuka tekst kilku liniowych. W tym trybie znacznik początku i końca wzoru ( ^ $) jest wstawiany przed i po znaku nowej linii ( \n).

simhumileco
źródło
1

Możesz to zrobić za pomocą zwykłego 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));
Makyen
źródło
1

Teraz trim () build w javascript.

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

po prostu kod konsoli lub wydrukuj, a następnie Twoje imię również zostanie przycięte.

Sakil Mahmud
źródło
Przed opublikowaniem odpowiedzi, która nie dodaje żadnych nowych informacji, przeczytaj komentarze do pytania. Kilka najważniejszych komentarzy opisuje / dyskutuje o tym i ma dużą liczbę głosów oddanych. Te komentarze pochodzą sprzed prawie 8 lat, a samo pytanie ma prawie 11 lat.
Ross Gurbutt,
0

Nie wiem, jakie błędy mogą tutaj ukryć, ale używam tego:

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

Lub jeśli wpis zawiera tekst:

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

Kolejna próba:

console.log(some_string_with_extra_spaces.match(/^\s*(.*?)\s*$/)[1])
plavozont
źródło
0

Oto w TypeScript:

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

Wróci do wyrażenia regularnego, jeśli natywny prototyp nie jest dostępny.

Joseph Lennox
źródło
0

Napisałem tę funkcję dla trim, gdy funkcja .trim () nie była dostępna w JS w 2008 roku. Niektóre starsze przeglądarki nadal nie obsługują funkcji .trim () i mam nadzieję, że ta funkcja może komuś pomóc.

FUNKCJA PRZYCINANIA

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;
}

Objaśnienie : Funkcja trim () akceptuje obiekt ciągu i usuwa wszelkie początkowe i końcowe białe spacje (spacje, tabulatory i znaki nowej linii) i zwraca przycięty ciąg. Za pomocą tej funkcji można przyciąć dane wejściowe formularza, aby zapewnić przesyłanie prawidłowych danych.

Przykładowo funkcję można wywołać w następujący sposób.

form.elements[i].value = trim(form.elements[i].value);
Ana Maria
źródło
-4

mine używa pojedynczego wyrażenia regularnego do wyszukiwania przypadków, w których konieczne jest przycinanie, i używa wyników wyrażenia regularnego do określenia pożądanych granic podciągów:

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
}

jedyną decyzją projektową, która weszła w to, było użycie podłańcucha do wykonania ostatecznego przechwytywania. s / \?: // (przechwytywanie terminu średni), a fragment zastępujący staje się:

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

w tych implikacjach postawiłem dwa zakłady na wyniki:

  1. czy implementacja podłańcucha kopiuje dane oryginalnego ciągu? jeśli tak, to w pierwszym, gdy trzeba przyciąć łańcuch, następuje podwójne przejście, najpierw w wyrażeniu regularnym (które, miejmy nadzieję, może być częściowe), a drugie w ekstrakcji podłańcucha. mam nadzieję, że implementacja podłańcuchu odwołuje się tylko do oryginalnego ciągu, więc operacje takie jak podłańcuch mogą być prawie darmowe. krzyżować palce

  2. jak dobre jest przechwytywanie w wyrażeniu regularnym? średni okres, wartość wyjściowa, może potencjalnie być bardzo długi. nie byłem gotowy stwierdzić, że przechwytywanie wszystkich wyrażeń regularnych nie przeszkadza w przechwytywaniu danych wejściowych o kilkaset KB, ale też nie testowałem (zbyt wiele środowisk uruchomieniowych, przepraszam!). drugi ZAWSZE uruchamia przechwytywanie; jeśli twój silnik może to zrobić bez uderzenia, być może wykorzystując niektóre z powyższych technik sznurkowych, na pewno UŻYJ GO!

rektide
źródło
-7

Dla IE9 + i innych przeglądarek

function trim(text) {
    return (text == null) ? '' : ''.trim.call(text);
}
Codler
źródło