Przytnij spacje od początku i końca łańcucha


152

Próbuję znaleźć sposób na przycięcie spacji od początku i końca ciągu tytułu. Używałem tego, ale wygląda na to, że nie działa:

title = title.replace(/(^[\s]+|[\s]+$)/g, '');

Jakieś pomysły?


1
var s = '1'; s = s.replace (/ ^ \ s + | \ s + $ / g, ''); alert ('-' + s + '-'); // to działa w ten sposób, nie potrzebujesz paren ani nawiasów kwadratowych.
ekerner

2
Javascript jest .trimteraz wbudowany, więc jest to odpowiedź dla nowoczesnych przeglądarek: stackoverflow.com/a/3000900/29182
Ziggy

Zapoznaj się z tym artykułem: javascriptstutorial.com/blog/trim-string

function trim11 (str) { str = str.replace(/^\s+/, ''); for (var i = str.length - 1; i >= 0; i--) { if (/\S/.test(str.charAt(i))) { str = str.substring(0, i + 1); break; } } return str; }
Badri Gs

Odpowiedzi:


216

Uwaga: od 2015 roku wszystkie główne przeglądarki (w tym IE> = 9) obsługują metodę String.prototype.trim () . Oznacza to, że w większości przypadków po prostu robienie tego str.trim()jest najlepszym sposobem osiągnięcia tego, o co chodzi w pytaniu.


Steven Levithan przeanalizował wiele różnych implementacji języka trimJavaScript pod kątem wydajności.

Jego rekomendacja to:

function trim1 (str) {
    return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
}

dla „implementacji ogólnego przeznaczenia, która jest szybka w różnych przeglądarkach” oraz

function trim11 (str) {
    str = str.replace(/^\s+/, '');
    for (var i = str.length - 1; i >= 0; i--) {
        if (/\S/.test(str.charAt(i))) {
            str = str.substring(0, i + 1);
            break;
        }
    }
    return str;
}

„jeśli chcesz obsługiwać długie ciągi znaków wyjątkowo szybko we wszystkich przeglądarkach”.

Bibliografia


21
Nowe Safari (5), Chrome (5), Firefox (3.6) i Opera (10.5) obsługują natywną metodę przycinania String. W tym przypadku przypisałbym metodę do String.prototype, jeśli nie istnieje, zamiast nowej funkcji globalnej.
kennebec

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

3
Wątpię, czy po ostatnich poprawach wydajności javascript ten test jest nadal aktualny lub wiarygodny, tak jak w momencie tej odpowiedzi.
Eduardo

2
dlaczego używasz podwójnych białych znaków? aka dlaczego to wyrażenie regularne, /^\s\s*/a nie to/^\s*/
aemonge

Dlaczego trim1i trim11?
Marty Cortez

68

Jeśli użycie jQuery jest opcją:

/**
 * Trim the site input[type=text] fields globally by removing any whitespace from the
 * beginning and end of a string on input .blur()
 */
$('input[type=text]').blur(function(){
    $(this).val($.trim($(this).val()));
});

lub po prostu:

$.trim(string);

48

Jak wspomniał @ChaosPandion , String.prototype.trimmetoda została wprowadzona do specyfikacji ECMAScript 5th Edition , niektóre implementacje zawierają już tę metodę, więc najlepszym sposobem jest wykrycie natywnej implementacji i zadeklarowanie jej tylko wtedy, gdy nie jest dostępna:

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

Następnie możesz po prostu:

title = title.trim();

1
Zawsze jestem trochę zdumiony tym memem sprawdzania, czy właściwość jest funkcją. Jeśli nie jest to funkcja, czy naprawdę należy ją nadpisać? Być może w takim przypadku powinieneś zgłosić błąd.
kojiro

1
@kojiro no może wyrzucenie błędu byłoby dobre, ale widzę to tak: próbuję zrobić podkładkę zgodną ze specyfikacją , a jeśli String.prototype.trimnie jest funkcją, to nie jest to String.prototype.trimmetoda opisana w ECMAScript 5th Edition Specyfikacja, specyfikacja gwarantuje, że trimjest to obiekt funkcji w środowiskach ES5.
CMS

7
throw { name: "UnlikelyPolyfillException", message: "Did someone really write a property on the String prototype named 'trim' that isn't a ECMA 5 compatible shim? Come on now, that's crazy." }
kojiro

34

Wiem, że to stary post, ale pomyślałem, że udostępnię nasze rozwiązanie. W poszukiwaniu najkrótszego kodu (czy nie wszyscy po prostu kochają zwięzłe wyrażenie regularne), można zamiast tego użyć:

title = title.replace(/(^\s+|\s+$)/g, '');

BTW: Przeprowadziłem ten sam test przez link udostępniony powyżej blog.stevenlevithan.com - Szybsze przycinanie JavaScript i ten wzorzec pokonał wszystkie inne RĘCE w dół!

Używając IE8, dodano test jako test13. Wyniki były następujące:

Długość oryginalna: 226002
Trym1: 110 ms (długość: 225994)
Trym2: 79 ms (długość: 225994)
Trym3: 172 ms (długość: 225994)
Trym4: 203 ms (długość: 225994)
Trym5: 172 ms (długość: 225994)
Trym6: 312 ms (Długość: 225994)
trim7: 203 ms (długość: 225994)
trim8: 47 ms (długość: 225994)
trim9: 453 ms (długość: 225994)
trim10: 15 ms (długość: 225994)
trim 11: 16 ms (długość: 225994) trim12:
31 ms (długość: 225994)
trim13: 0ms (długość: 226002)



11

Tutaj powinno zrobić wszystko, czego potrzebujesz

function doSomething(input) {
    return input
              .replace(/^\s\s*/, '')     // Remove Preceding white space
              .replace(/\s\s*$/, '')     // Remove Trailing white space
              .replace(/([\s]+)/g, '-'); // Replace remaining white space with dashes
}

alert(doSomething("  something with  some       whitespace   "));

\ s \ s * wydaje się zbędne, ponieważ jest \ s +, ale jest trochę szybsze
CaffGeek

4

Oto kilka metod, których używałem w przeszłości do przycinania ciągów w js:

String.prototype.ltrim = function( chars ) {
    chars = chars || "\\s*";
    return this.replace( new RegExp("^[" + chars + "]+", "g"), "" );
}

String.prototype.rtrim = function( chars ) {
    chars = chars || "\\s*";
    return this.replace( new RegExp("[" + chars + "]+$", "g"), "" );
}
String.prototype.trim = function( chars ) {
    return this.rtrim(chars).ltrim(chars);
}

RegExp ^[\s*]+pasuje *na początku ciągu, więc funkcja jest przycinana "*** Foo"do "Foo".
Ferdinand Beyer

chyba :) zastanawiam się, czemu nikt nie narzekał ... Dawno temu napisałem ten kod i jest on używany w en.wikipedia.org/wiki/Wikipedia:Twinkle . teraz, kiedy już to wskazałeś, jest to oczywiste.
azatoth

4

Oto mój aktualny kod, druga linia działa, jeśli skomentuję trzecią linię, ale nie działa, jeśli zostawię ją tak, jak jest.

var page_title = $(this).val().replace(/[^a-zA-Z0-9\s]/g, '');
page_title = page_title.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
page_title = page_title.replace(/([\s]+)/g, '-');

usuń drugą i trzecią linię i użyj kodu z polygenelubricants, page_title = trim1 (page_title);
mrówka

więc ostatecznie próbujesz wyczyścić ten ciąg, aby był przycięty, alfanumeryczny i myślniki zamiast spacji jako separatory?
CaffGeek

@chad yes. Tworzenie adresów URL informacji w locie, aby użytkownicy mogli zobaczyć, jak będzie wyglądać ich adres URL. Podobnie jak robi to Wordpress podczas tworzenia nowych postów na blogu.
James Jeffery,


2

jQuery.trim ("cześć, jak się masz?");

:)


2
Wygląda na to, że robisz śmieszne, ale pamiętaj, że ludzie czytający ten komentarz mogą pokusić się o skorzystanie z twojego rozwiązania i pójść dalej.
limitowany

$ .trim ("blabh blah blah"); poprawnie zwraca „blabh blah blah”
RAY

2

Gdy DOM jest w pełni załadowany, możesz dodać to do wszystkich pól tekstowych. Nigdy nie miałem sytuacji, w której musiałem podać początkową lub końcową spację, więc robienie tego przez cały czas na całym świecie zadziałało dla mnie ...

$(function() { $('input[type=text]').on('blur', function(){
    $(this).val($.trim($(this).val()));
  });
});

wymaga jQuery. Kolejne pytanie (nie testowałem tego): czy blurfaktycznie pojawia się przed przesłaniem, gdy jestem w polu i naciskam <kbd> enter </kbd>, aby wysłać formularz?
amenthes

2

To właśnie sugeruje JavaScript Architect / Guru Douglas Crockford.

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

Uwaga: musisz zdefiniować „metodę” dla Function.prototype.

Alternatywnie

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

title.trim();    // returns trimmed title

Obserwacja

W najnowszych przeglądarkach metoda przycinania jest dołączona domyślnie. Nie musisz więc dodawać tego jawnie.

Główne przeglądarki Chrome, Firefox, Safari itp. Obsługują metodę przycinania . Sprawdzono w Chrome 55.0.2883.95 (64-bitowej), Firefox 51.0.1 (64-bitowej), Safari 10.0 (12602.1.50.0.10).


1
var word = " testWord ";   //add here word or space and test

var x = $.trim(word);

if(x.length > 0)
    alert('word');
else
    alert('spaces');

0

rekurencyjna próba tego

function t(k){ 
    if (k[0]==' ') {
        return t(k.substr(1,k.length));
    } else if (k[k.length-1]==' ') {
        return t(k.substr(0,k.length-1));
    } else {
        return k;
    }
}

zadzwoń tak:

t("      mehmet       "); //=>"mehmet"

jeśli chcesz filtrować specyficzne znaki, możesz w zasadzie zdefiniować ciąg listy:

function t(k){
    var l="\r\n\t "; //you can add more chars here.
    if (l.indexOf(k[0])>-1) {
        return t(k.substr(1,k.length));
    } else if (l.indexOf(k[k.length-1])>-1) {
        return t(k.substr(0,k.length-1));
    } else {
        return k;
    }
}

Istnieje subtelna różnica w porównaniu z pytaniami! Podczas sprawdzania przestrzeni ' ', ale pytanie jest o białej przestrzeni w ogóle, w tym "\n", "\t"a także innych znaków, które są dopasowane do druku w regex przez /\s/.
amenthes

wtedy możesz edytować warunek, jak "if (" \ t \ r \ n ".indexOf (k [0])> - 1)" nadal działa, to są już pewne typy.
mguven guven
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.