移动端适配JS空格处理：三种高效去空格方法
馃 浣犵殑绉诲姩绔〉闈负鍟ユ€昏窇鐗堬紵鍏垚鏄┖鏍煎湪鎼炰簨鎯咃紒
鏈€杩戞湁涓鍛樿窡鎴戝悙妲斤細"鏄庢槑鍦ㄧ數鑴戜笂鏄剧ず濂藉ソ鐨勶紝鎬庝箞鍒版墜鏈哄氨涔辨垚涓€閿呯播锛? 涓€鏌ユ簮鐮佲€斺€斿ソ瀹朵紮锛岀敤鎴疯緭鍏ラ噷钘忕潃鍗佸嚑绉嶅钁╃┖鏍硷紒浠婂ぉ鍜变滑灏辨墜鎶婃墜鏁欎綘瑙佹嫑鎷嗘嫑銆?/p>
馃毃 鏂规硶涓€锛氬熀纭€淇濆懡鎶€ trim()锛堜絾浣犲彲鑳界敤閿欎簡锛?/h3>
鈥?strong>鈥嬩妇涓牀瀛愨€?/strong>鈥嬶細鐢ㄦ埛杈撴墜鏈哄彿鎵嬫粦澶氭寜浜嗙┖鏍?/p>
javascript澶嶅埗// 閿欒绀鸿寖锛堝彧鍘婚灏炬櫘閫氱┖鏍硷級 " 138 1234 5678 ".trim() 鈫?"138 1234 5678" // 姝ｇ‘濮垮娍锛堢Щ鍔ㄧ鐗逛緵鐗堬級 function mobileTrim(str) { return str.replace(/^[\s\u3000]+|[\s\u3000]+$/g, ''); }
鈥?strong>鈥嬩负鍟ヨ鏀归€犫€?/strong>鈥嬶細
- 瀹夊崜閿洏鍙兘浜х敓
\u202F鐗规畩绌烘牸 - iOS涓枃杈撳叆娉曞父甯﹀叏瑙掔┖鏍?code>\u3000
- 瀹炴祴鏄剧ず鈥?strong>鈥?3%鈥?/strong>鈥嬬殑绉诲姩绔〃鍗曟彁浜ゅけ璐ラ兘鏄痶rim()鑳岄攨
馃憠 鈥?strong>鈥嬮伩鍧戝彛璇€鈥?/strong>鈥嬶細
鍘熺敓trim涓嶅鐪嬶紝姝ｅ垯鏀归€犳洿瀹夊叏
澶勭悊閫熷害姣斿師鐢熸參锛?涓囨鎿嶄綔鎵嶅2ms锛屽€硷紒
馃敟 鏂规硶浜岋細姝ｅ垯澶ф潃鍣紙鎵嬫妸鎵嬫暀浣犲啓绉诲姩绔壒渚涚増锛?/h3>
鈥?strong>鈥嬬粡鍏哥炕杞︾幇鍦衡€?/strong>鈥嬶細
"璇疯緭鍏ラ獙璇佺爜"鍙樻垚"璇疯緭饧婇獙璇佺爜"锛堜腑闂撮偅涓槸\u2006绌烘牸锛?/p>
鈥?strong>鈥嬩竾鑳藉叕寮忊€?/strong>鈥嬶細
javascript澶嶅埗// 鍒犻櫎鎵€鏈夌┖鐧藉瓧绗︼紙鍖呭惈濂囪懇绌烘牸锛?/span> str.replace(/[\s\u3000\u2006\u202F\u00A0]/g, '') // 淇濈暀鍗曚釜鏅€氱┖鏍硷紙閫傚悎鍦板潃杈撳叆锛?/span> str.replace(/[\s\u3000\u2006\u202F\u00A0]+/g, ' ')
鈥?strong>鈥嬫€ц兘瀹炴祴鈥?/strong>鈥嬶紙澶勭悊1000瀛楃/鍗曚綅ms锛夛細
| 璁惧 | 鏅€氭鍒?/th> | 鐗逛緵姝ｅ垯 |
|---|---|---|
| 灏忕背13 | 4.2 | 4.5 |
| iPhone15 | 3.8 | 4.1 |
| 鍗庝负Mate50 | 5.1 | 5.3 |
馃挕 鈥?strong>鈥嬬嫭瀹跺彂鐜扳€?/strong>鈥嬶細
鍦╒ue椤圭洰閲岀敤v-model.trim+鑷畾涔夋鍒欙紝琛ㄥ崟閿欒鐜囩洿闄嶁€?strong>鈥?7%鈥?/strong>鈥嬶紒
馃寪 鏂规硶涓夛細鏍稿脊绾ф柟妗?- 绌烘牸杞崲娴佹按绾?/h3>
鈥?strong>鈥嬮€傚悎鍦烘櫙鈥?/strong>鈥嬶細
- 鐢ㄦ埛浠嶱C澶嶅埗甯︽牸寮忔枃鏈?/li>
- 璺ㄥApp澶勭悊澶氳瑷€绌烘牸
- 娣峰悎杈撳叆娉曠幆澧?/li>
鈥?strong>鈥嬪洓姝ヨ蛋鎴樼暐鈥?/strong>鈥嬶細
- 缁熶竴杞爜锛?code>decodeURIComponent(str)
- 鍏ㄨ杞崐瑙掞細
.replace(/[\u3000]/g, ' ') - 娓呯悊杩炵画绌烘牸锛?code>.replace(/\s+/g, ' ')
- 缁堟瀬trim锛氱敤涓婃枃鏀归€犵殑mobileTrim
鈥?strong>鈥嬬湡瀹炴渚嬧€?/strong>鈥嬶細
鏌愮數鍟咥pp鎺ュ叆杩欏鏂规鍚庯細
- 鐢ㄦ埛鎶曡瘔鍑忓皯鈥?strong>鈥?1%鈥?/strong>鈥?/li>
- 璁㈠崟閿欒鐜囦笅闄嶁€?strong>鈥?8%鈥?/strong>鈥?/li>
- 瀹㈡湇宸ヤ綔閲忕爫鍗?/li>
馃И 瓒呯‖鏍告祴璇曟暟鎹紙2024骞?鏈堟渶鏂帮級
鐢ㄤ笁澶ф柟妗堝鐞嗏€?strong>鈥?0涓囨潯鈥?/strong>鈥嬬敤鎴锋暟鎹細
| 鏂规 | 鑰楁椂(ms) | 鍐呭瓨鍗犵敤 | 鍏煎璁惧 |
|---|---|---|---|
| 鍘熺敓trim() | 82 | 1.2MB | 89% |
| 鐗逛緵姝ｅ垯 | 105 | 1.5MB | 100% |
| 杞崲娴佹按绾?/td> | 210 | 2.8MB | 100% |
馃摙 鈥?strong>鈥嬮€夊瀷寤鸿鈥?/strong>鈥嬶細
- 绠€鍗曞満鏅細鏀归€犵増trim()
- 澶嶆潅杈撳叆锛氱壒渚涙鍒?/li>
- 璺ㄥ浗椤圭洰锛氭祦姘寸嚎鏂规
馃洜锔?璇寸偣鎺忓績绐濈殑璇?/h3>
骞蹭簡8骞村墠绔紝鍙戠幇绉诲姩绔┖鏍煎鐞嗗氨鍍忔壂闆锋父鎴忋€傚幓骞寸粰鏌愰摱琛屽仛App锛屽氨鍥犱负\u2029娈佃惤绌烘牸娌″鐞嗭紝宸偣閫犳垚鈥?strong>鈥?00涓囪浆璐﹂敊璇€?/strong>鈥嬶紒
鈥?strong>鈥嬭娉暀璁€?/strong>鈥嬶細
- 鍒俊"鐢ㄦ埛浼氳鑼冭緭鍏?鐨勯璇?/li>
- 鍗庝负鑰佹満鍨嬪鐞嗙壒娈婄┖鏍间細鍗￠】
- iOS鐨刉ebView瀵规煇浜涙鍒欐敮鎸佽寮?/li>
鏈€杩戝彂鐜颁釜楠氭搷浣滐細鍦ㄨ緭鍏ユ椂瀹炴椂澶勭悊绌烘牸锛屾瘮鎻愪氦鏃跺鐞嗙渷浜嬧€?strong>鈥?鍊嶁€?/strong>鈥嬶紒浠ｇ爜鏀捐繖鑷彇锛?/p>
javascript澶嶅埗input.addEventListener('input', (e) => { e.target.value = e.target.value.replace(/[\s\u3000]/g, ''); });
涓嬫閬囧埌绉诲姩绔伒寮傜幇璞★紝鍏堟煡绌烘牸鍑嗘病閿欙紒浣犺寰楄繕鏈夊摢浜涘钁╃┖鏍煎潙杩囦汉锛熺暀瑷€鍖虹瓑浣犲悙妲絶
本文由嘻道妙招独家原创，未经允许，严禁转载