2010-05-24 44 views
25

Tôi có yếu tố HTML chứa này:Làm cách nào để xóa thêm khoảng trắng bằng javascript hoặc jquery?

<!--Product Style--> <div style="float: right; padding-top: 4px; padding-bottom: 5px;"> P6C245RO </div> <div style="text-transform: uppercase; font-weight: bold; padding-top: 4px; padding-bottom: 5px;"> Style </div> <div style="clear: both; border-top: 1px solid rgb(216, 216, 216); padding-top: 4px;"> <!--Product Description--> <div style="font-size: 11px ! important;"></div> <div style="background: url(&quot;http://ii.armaniexchange.com/ArmaniExchange/images/en_US/global/globalgraphics/bullet.gif&quot;) no-repeat scroll 0pt 4px transparent; padding-left: 12px;">fine tonal striped fabric</div> <div style="background: url(&quot;http://ii.armaniexchange.com/ArmaniExchange/images/en_US/global/globalgraphics/bullet.gif&quot;) no-repeat scroll 0pt 4px transparent; padding-left: 12px;">epaulettes and sleeve tab</div> <div style="background: url(&quot;http://ii.armaniexchange.com/ArmaniExchange/images/en_US/global/globalgraphics/bullet.gif&quot;) no-repeat scroll 0pt 4px transparent; padding-left: 12px;">metal logo plate on the chest pocket</div> 

Khi tôi đọc nó sử dụng jquery tôi nhận được .text() chứa rất nhiều không gian và/n ở giữa các văn bản nhưng không có các thẻ html.

Làm cách nào để xóa tất cả các khoảng trắng này và trả lại văn bản rõ ràng bằng javascript tinh khiết hoặc jquery?

Trả lời

53
element.text().replace(/\s+/g, " "); 

này sử dụng một biểu thức chính quy (/.../) để tìm kiếm một hoặc nhiều (+) ký tự khoảng trắng (\s) trong suốt văn bản của phần tử (g, các sửa đổi toàn cầu, tìm tất cả các trận đấu chứ không phải dừng lại sau khi người đầu tiên khớp) và thay thế mỗi ô bằng một dấu cách (" ").

+0

1 Tôi hiểu lắm câu hỏi. Điều đó sẽ làm việc tốt cho không gian và dòng mới (những gì OP cho biết ông cần). Lưu ý rằng một số trình duyệt không thực hiện đúng '\ s' một cách chính xác khi bạn nhận được vào khoảng trống không phải ASCII (http://thinkweb2.com/projects/prototype/whitespace-deviations/), nhưng đó là một niggle. :-) –

+1

Bạn đang thiếu 'g' (chỉ báo chung). – user113716

+0

@patrick Có, sau khi thêm 'g' (chỉ số toàn cục), mọi thứ hoạt động hoàn hảo. –

3

Bạn có thể loại bỏ tất cả các trường hợp của khoảng trắng đồng dạng và dòng mới như vậy

// Note: console.log() requires Firebug 

var str = ' this is \n some text \r don\'t \t you know? '; 
console.log(str); 

str = str.replace(/[\s\n\r]+/g, ' '); 
console.log(str); 

Sau đó, để làm sạch nó lên và áp dụng nó vào jQuery

$.trim($element.text().replace(/[\s\n\r]+/g, ' ')) 
10

của bạn Đối với chuỗi

" this is my string  " 

Bạn có thể muốn tạo không gian quá nhiều không gian đơn lẻ, nhưng xóa toàn bộ không gian đầu và cuối ely. Cho rằng, thêm một .replace

s.replace(/\s+/g, " ").replace(/^\s|\s$/g, ""); 

cho

"this is my string" 

Cập nhật

s.replace(/\s+/g, " ").trim() 

Cảm ơn, @ Pier-Luc Gendreau

+0

Bạn có thể xóa khoảng trắng đầu và cuối bằng '.trim()' –

+0

Thật không may, 'trim()' không phải là chống đạn. Hãy thử nó trên chuỗi tôi đã cung cấp ở trên. –

+0

Dường như làm việc ở đây và nhìn vào [polyfill trên MDN] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim#Polyfill), thậm chí nó trông cho các BOM và không gian không phá vỡ! Nó đòi hỏi IE9 + mặc dù. –

Các vấn đề liên quan