Cắt khoảng trắng từ đầu và cuối chuỗi


152

Tôi đang cố gắng tìm cách cắt bớt khoảng trắng từ đầu và cuối chuỗi tiêu đề. Tôi đã sử dụng cái này, nhưng nó dường như không hoạt động:

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

Có ý kiến ​​gì không?


1
var s = '1'; s = s.replace (/ ^ \ s + | \ s + $ / g, ''); cảnh báo ('-' + s + '-'); // nó hoạt động như thế này, bạn không cần dấu ngoặc hoặc dấu ngoặc vuông.
ekerner

2
Javascript đã .trimđược tích hợp sẵn, vì vậy đây là câu trả lời cho các trình duyệt hiện đại: stackoverflow.com/a/3000900/29182
Ziggy

Tham khảo bài viết này: javascriptstutorial.com/blog/trim-opes

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

Câu trả lời:


216

Lưu ý: Kể từ năm 2015, tất cả các trình duyệt chính (bao gồm IE> = 9) đều hỗ trợ String.prototype.trim () . Điều này có nghĩa là đối với hầu hết các trường hợp sử dụng, chỉ cần làm str.trim()là cách tốt nhất để đạt được những gì câu hỏi yêu cầu.


Steven Levithan đã phân tích nhiều triển khai khác nhau trimtrong Javascript về hiệu suất.

Đề nghị của ông là:

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

cho "triển khai mục đích chung là trình duyệt chéo nhanh" và

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

"Nếu bạn muốn xử lý chuỗi dài đặc biệt nhanh trong tất cả các trình duyệt".

Người giới thiệu


21
Safari mới (5), Chrome (5), Firefox (3.6) và Opera (10.5) đều hỗ trợ phương pháp cắt Chuỗi gốc. Trong trường hợp đó, tôi sẽ gán một phương thức cho String.prototype, nếu nó không tồn tại, thay vì một hàm toàn cục mới.
kennebec

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

3
Tôi nghi ngờ rằng sau những cải tiến gần đây về hiệu suất javascript, bài kiểm tra này vẫn có liên quan hoặc đáng tin cậy như tại thời điểm trả lời này.
Eduardo

2
Tại sao bạn sử dụng hai ký tự trắng? aka tại sao regex này /^\s\s*/mà không phải cái này/^\s*/
aemonge

Tại sao trim1trim11?
Marty Cortez

68

Nếu sử dụng jQuery là một tùy chọn:

/**
 * 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()));
});

hoặc đơn giản:

$.trim(string);

48

Như @ChaosPandion đã đề cập, các String.prototype.trimphương pháp đã được giới thiệu vào ECMAScript 5th Edition Thông số kỹ thuật, một số hiện thực đã bao gồm phương pháp này, vì vậy cách tốt nhất là để phát hiện việc thực hiện bản địa và khai báo nó chỉ nếu nó không có sẵn:

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

Sau đó, bạn có thể chỉ cần:

title = title.trim();

1
Tôi luôn bị bối rối bởi meme này về việc kiểm tra xem tài sản có phải là một chức năng hay không. Nếu đó không phải là một chức năng thì hành vi đúng có thực sự ghi đè lên nó không? Có lẽ bạn nên ném một lỗi trong trường hợp đó.
kojiro

1
@kojiro, tốt, có thể đưa ra một lỗi sẽ tốt, nhưng tôi thấy nó như thế này: Tôi đang cố gắng tạo ra một shim tuân thủ thông số kỹ thuật , và nếu String.prototype.trimkhông phải là một chức năng, thì đó không phảiString.prototype.trimphương pháp được mô tả trên ECMAScript Edition Edition Đặc điểm kỹ thuật, thông số kỹ thuật đảm bảo đó trimlà một đối tượng chức năng trên môi trường 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

Tôi biết đây là một bài viết cũ, nhưng chỉ nghĩ rằng tôi muốn chia sẻ giải pháp của chúng tôi. Trong cuộc tìm kiếm mã ngắn nhất (không phải ai cũng chỉ thích regex terse), thay vào đó, người ta có thể sử dụng:

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

BTW: Tôi đã chạy thử nghiệm tương tự này thông qua liên kết được chia sẻ ở trên blog.stevenlevithan.com - JavaScript JavaScript nhanh hơn và mô hình này đánh bại tất cả các TAY khác!

Sử dụng IE8, thêm kiểm tra như test13. Kết quả là:

Độ dài ban đầu: 226002
trim1: 110ms (chiều dài: 225994)
trim2: 79ms (chiều dài: 225994)
trim3: 172ms (chiều dài: 225994)
trim4: 203ms (chiều dài: 225994)
trim5: 172ms (chiều dài: 225994)
trim6: 312ms 225994)
trim7: 203ms (chiều dài: 225994)
trim8: 47ms (chiều dài: 225994)
trim9: 453ms (chiều dài: 225994)
trim10: 15ms (chiều dài: 225994)
trim11: 16ms (chiều dài: 225994)
trim12: 31ms (chiều dài: 225994)
trim13: 0ms (chiều dài: 226002)



11

Ở đây, điều này sẽ làm tất cả những gì bạn cần

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 * có vẻ dư thừa, vì có \ s +, nhưng nó nhanh hơn một chút
CaffGeek

4

Đây là một số phương pháp tôi đã được sử dụng trong quá khứ để cắt chuỗi trong 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*]+khớp với *ở đầu chuỗi, để hàm của bạn cắt "*** Foo"theo "Foo".
Ferdinand Beyer

có lẽ :) tự hỏi tại sao không ai phàn nàn ... Cách đây rất lâu tôi đã viết mã đó và nó được sử dụng trong en.wikipedia.org/wiki/Wikipedia:Twinkle . tắt nguồn bây giờ mà bạn chỉ ra nó rõ ràng.
azatoth

4

Đây là mã hiện tại của tôi, dòng thứ 2 hoạt động nếu tôi nhận xét dòng thứ 3, nhưng không hoạt động nếu tôi để nó như thế nào.

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, '-');

xóa dòng thứ 2 & thứ 3 và sử dụng mã từ polygenelubricants, page_title = trim1 (page_title);
con kiến

Vì vậy, cuối cùng bạn đang cố gắng làm sạch chuỗi này để được cắt, số alpha và dấu gạch ngang thay vì khoảng trắng làm dấu phân cách?
CaffGeek

@chad vâng. Để tạo URL sên một cách nhanh chóng để người dùng có thể thấy URL của họ sẽ trông như thế nào. Tương tự như cách wordpress làm điều đó khi tạo bài đăng blog mới.
James Jeffery


2

jQuery.trim ("xin chào, bạn thế nào?");

:)


2
Có vẻ như bạn có thể đang làm cho buồn cười, nhưng hãy nhớ rằng mọi người đọc nhận xét này có thể bị cám dỗ để sử dụng giải pháp của bạn và di chuyển cùng.
hạn vào

$ .trim ("blabh blah blah"); trả lại chính xác "blabh blah blah"
RAY

2

Khi DOM được tải đầy đủ, bạn có thể thêm phần này vào tất cả các trường văn bản. Tôi chưa bao giờ có một tình huống mà tôi cần phải gửi không gian hàng đầu hoặc dấu vết, vì vậy làm tất cả thời gian trên toàn cầu đã làm việc cho tôi ...

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

yêu cầu jQuery. Một câu hỏi khác (tôi đã không kiểm tra nó): có blurthực sự xảy ra trước khi gửi khi tôi ở trong một trường và nhấn <kbd> enter </ kbd> để gửi biểu mẫu không?
amenthes

2

Đây là những gì được đề xuất bởi JavaScript Architect / Guru Douglas Crockford.

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

Lưu ý: bạn phải xác định "phương thức" cho Function.prototype.

Hoặc

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

title.trim();    // returns trimmed title

Quan sát

Trong các trình duyệt gần đây, phương pháp cắt được bao gồm theo mặc định. Vì vậy, bạn không cần phải thêm nó một cách rõ ràng.

Các trình duyệt chính Chrome, Firefox, Safari, vv hỗ trợ phương pháp cắt . Đã kiểm tra trong Chrome 55.0.2883.95 (64 bit), Firefox 51.0.1 (64 bit), 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

một thử đệ quy cho điều này

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

gọi như thế này:

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

nếu bạn muốn lọc các ký tự đặc biệt, bạn có thể xác định một chuỗi danh sách về cơ bản:

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

Có một sự khác biệt tinh tế từ những gì được hỏi! Bạn đang kiểm tra cho một không gian ' ', nhưng câu hỏi là khoảng không gian màu trắng nói chung, bao gồm "\n", "\t"và các ký tự in không khác đang xuất hiện trong regex bằng /\s/.
amenthes

sau đó bạn có thể chỉnh sửa nếu điều kiện là "if (" \ t \ r \ n ".indexOf (k [0])> - 1)" vẫn hoạt động, đó là một số loại nhất định.
mguven guven
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.