>웹 프론트엔드 >JS 튜토리얼 >즉, 트림 속성_javascript 기술을 지원하지 않는 7/8에 대한 솔루션

즉, 트림 속성_javascript 기술을 지원하지 않는 7/8에 대한 솔루션

WBOY
WBOY원래의
2016-05-16 16:47:051095검색

IE 7 및 8 브라우저에서 공백을 제거하기 위해 Trim() 속성을 사용하면 오류가 보고됩니다.

따라서 이 문제를 해결하기 위한 해결책은 다음과 같습니다.

var aa = $("#id").val().trim() --- IE에서는 Trim() 메서드를 구문 분석할 수 없습니다

해결책:

[ var aa = $.trim($("#id").val()) ] 사용하기가 쉽지 않으므로 아래에 소개된 것을 사용하십시오.

W3C 사람들의 머리는 당나귀에게 쫓겨났습니다. JavaScript 1.8.1이 되어서야 트림 기능(trimLeft, TrimRight 포함)이 지원되었습니다. 안타깝게도 현재는 Firefox 3.5에서만 지원됩니다. 문자열 양쪽의 공백을 제거하는 것은 매우 일반적이므로 모든 주요 라이브러리에서 찾을 수 있습니다. 게다가 외국인들은 연구에 매우 열정적이어서 꽤 많은 구현을 만들어냈습니다.

1개 달성 OK . (이것을 js로 작성한 다음 공백을 제거하려는 문자열 바로 뒤에 .trim()을 따르십시오.)

코드 복사 코드는 다음과 같습니다.

String.prototype.trim = function() {
return this .replace(/^ss*/, '' ).replace(/ss*$/, '' );
}

별로 좋아 보이지는 않습니다. 주로 브라우저의 내부 최적화로 인해 실제 속도가 놀랍습니다. 유명한 예는 문자열 접합(string splicing)입니다. Array로 만든 StringBuffer보다 직접 추가가 더 빠릅니다. base2 클래스 라이브러리는 이 구현을 사용합니다.

구현 2

코드 복사 코드는 다음과 같습니다.

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

은 구현 1과 매우 유사하지만 처음에 하나 이상의 공백 문자가 있다고 가정하기 때문에 약간 느립니다. Prototype.js는 이 구현을 사용하지만 Prototype의 메소드는 Ruby와 동일한 이름을 가지려고 노력하기 때문에 이름은 스트립입니다.

3개 달성

코드 복사 코드는 다음과 같습니다.

String.prototype.trim = function() {
returnthis .substring(Math.max( this .search(/S/), 0), this .search(/Ss*$/) 1);
}

가로채기를 통해 빈 부분을 획득하고(물론 중간에 공백 문자도 허용) 총 4개의 네이티브 메소드가 호출됩니다. 기본값은 매우 영리합니다. 하위 문자열은 두 개의 숫자를 매개변수로 사용합니다. Math.max는 두 개의 숫자를 매개변수로 사용하고 검색은 하나의 숫자를 반환합니다. 속도는 위의 두 가지보다 약간 느리지만 아래의 대부분의 것보다는 빠릅니다.

4개 달성

코드 복사 코드는 다음과 같습니다.

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

이것은 후보 연산자를 사용하여 두 정규식을 연결하는 구현 2의 단순화된 버전이라고 할 수 있습니다. 그러나 그렇게 하면 구현 3보다 열등한 브라우저 최적화 기회를 놓치게 됩니다. 매우 우아해 보이기 때문에 JQuery, mootools 등 많은 라이브러리에서 사용합니다

5개 달성

코드 복사 코드는 다음과 같습니다.

String.prototype.trim = function() {
var str = this ;
str = str.match(/S (?:s S )*/);
return str ? str[0] : '' ;
}

match는 배열을 반환하므로 요구 사항을 충족하는 원본 문자열 부분이 배열의 요소가 됩니다. 문자열 중간에 있는 공백 문자가 제거되는 것을 방지하려면 비캡처 그룹화(?:exp)를 사용해야 합니다. 배열이 비어 있을 수 있으므로 나중에 추가 판단을 내리겠습니다. 브라우저는 그룹화 처리가 상대적으로 약하고, 단어 하나도 느린 것 같습니다. 그러므로 규칙성이 기본적으로 전능하더라도 규칙성에 대해 미신을 품지 마십시오.

6개 달성

코드 복사 코드는 다음과 같습니다.

String.prototype.trim = function() {
return this .replace(/^s*(S*(s S )*)s*$/, '$1' );
}

요구사항에 맞는 부품을 제공하여 빈 문자열에 넣어주세요. 그러나 특히 IE6에서는 효율성이 매우 낮습니다.

7개 달성

코드 복사 코드는 다음과 같습니다.

String.prototype.trim = function() {
return this .replace(/^s*(S*(?:s S )*)s*$/, '$1' );
}

구현 6과 매우 유사하지만 이를 활용하기 위해 비캡처 그룹화를 사용하고 성능 효율성이 약간 향상됩니다.

8개 달성

코드 복사 코드는 다음과 같습니다.

String.prototype.trim = function() {
return this .replace(/^s*((?:[Ss]*S)?)s*$/, '$1' );
}

비캡처 그룹과 문자 세트를 사용하고 * 대신 ?를 사용하여 위의 두 가지 아이디어를 개선했습니다. 특히 IE6에서 이러한 성능 향상은 미친 짓이라고 할 수 있으며, 직접적으로 Firefox를 죽이기도 합니다.

구현9

코드 복사 코드는 다음과 같습니다.

String.prototype.trim = function() {
return this .replace(/^s*([Ss]*?)s*$/, '$1' );
}

이번에는 비캡처 그룹을 대체하기 위해 지연 매칭이 사용되었는데, 이는 Firefox에서 지난번만큼 개선되었습니다.

10개 달성

코드 복사 코드는 다음과 같습니다.

String.prototype.trim = function() {
var str = this ,
whitespace = ' nrtfx0bxa0u2000u2001u2002u2003u2004u20 05u2006u2007u2008u2009u200au200bu2028u2029 u3000' ;
for ( var i = 0 ,len = str.length; i = 0 i--) {
if ( whitespace.indexOf (str.charAt(i)) === -1) {
str = str.substring(0, i 1);
break ;
}
}
return whitespace.indexOf (str.charAt(0)) === -1 ? str : '' ;
}

이것을 만든 사람은 더 이상 소가 아니라 이미 신의 수준에 이르렀다는 점을 말씀드리고 싶습니다. 먼저 가능한 모든 공백 문자를 나열하고, 첫 번째 순회에서 선행 공백을 잘라내고, 두 번째 패스에서 다음 공백을 잘라냅니다. 전체 프로세스에서는 문자열 처리를 위해 특별히 설계된 기본 메서드인 indexOf 및 substring만 사용하며 일반 규칙은 사용되지 않습니다. 속도는 놀라울 정도로 빠르며 내부 바이너리 구현에 가까울 것으로 예상되며 IE와 Firefox(물론 다른 브라우저도 포함)에서 뛰어난 성능을 발휘할 것입니다. 속도는 0밀리초입니다.

11개 달성

코드 복사 코드는 다음과 같습니다.

String.prototype.trim = function() {
var str = this ,
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 ;
}
}
문자열 반환
}

구현 10에서는 일반적인 알 수 없는 문자열 가로채기 방법이 약간 더 복잡하기는 하지만 일반적인 대체 방법보다 훨씬 낫다고 말했습니다. 그러나 정규식이 너무 복잡하지 않은 한 브라우저의 정규식 최적화를 사용하여 프로그램 실행 효율성을 향상시키고 IE에서 8가지 성능을 달성할 수 있습니다. 공백 구현이 너무 길고 기억하기 어렵기 때문에 일반적으로 누구도 프로젝트에서 구현 10을 사용하지 않을 것이라고 생각합니다(물론 클래스 라이브러리를 구축하는 경우 확실히 첫 번째 구현입니다). 구현 11은 전면 부분의 공백을 정기적인 교체로 잘라내고, 후자 부분을 기본 방식으로 처리한 버전이라고 할 수 있지만, 효과는 원래 버전보다 떨어지지 않지만 속도는 매우 놀랍습니다. .

12개 달성

코드 복사 코드는 다음과 같습니다.

String.prototype.trim = function() {
var str = this ,
str = str.replace(/^ss*/, '' ),
ws = /s/,
i = str.length;
while (ws.test(str.charAt(--i)));
return str.slice(0, i 1);
}

实现10与实现11在写法上更好的改进版,注意说的不是性能速度,而是易记与施用上。和它的两个先辈都是零毫秒级另外,以后就用这个来工作与吓人。

下面是老外给出的比力结果,执行背景是对Magna Carta 这文章(超过27,600字符)进行trim操作。

实现 Firefox 2 IE 6

trim1 15ms trim2 31ms trim3 46ms 31ms
trim4 47ms 46ms
trim5 156ms 1656ms
trim6 172ms 2406ms
trim7 172ms 1640ms
trim8 281ms trim9 125ms 78ms

trim10 trim11 trim12 trim函数实现揭晓自己的想法,想懂得原作者说什么请看原文。



JS去除空格적 방법目前共有12种:

实现1
String.prototype.trim = function() { return this.replace(/^ss*/, '' ).replace(/ss*$/, ''); }
实现2
String.prototype.trim = function() { return this.replace(/^s /, '').replace(/s $/, ''); }
实现3
String.prototype.trim = function() { return this.s string(Math.max(this.search(/S/), 0),this.search(/Ss*$/ ) 1); }
实现4
String.prototype.trim = function() { return this.replace(/^s |s $/g, ''); }
String.prototype.trim = function() { var str = this; str = str.match(/S (?:s S )*/); str을 반환 ? str[0] : ''; }
String.prototype.trim = function() { return this.replace(/^s*(S*(s S )*)s*$/, '$1'); }
实现7
String.prototype.trim = function() { return this.replace(/^s*(S*(?:s S )*)s*$/, '$1'); }
String.prototype.trim = function() { return this.replace(/^s*((?:[Ss]*S)?)s*$/, '$1'); }
String.prototype.trim = function() { return this.replace(/^s*([Ss]*?)s*$/, '$1'); }
String.prototype.trim = function() { var str = this, whitespace = ' nrtfx0bxa0???????????????? '; for (var i = 0,len = str.length; i = 0; i--) { if (whitespace.indexOf(str.charAt(i)) === -1) { str = str.s string( 0, 나는 1); 부서지다; } } return whitespace.indexOf(str.charAt(0)) === -1 ? str : ''; }
实现11
String.prototype.trim = function() { var str = this, str = str.replace(/^s /, ''); for (var i = str.length - 1; i >= 0; i--) { if (/S/.test(str.charAt(i))) { str = str.s string(0, i 1 ); 부서지다; } } str을 반환; }
实现12
String.prototype.trim = function() { var str = this, str = str.replace(/^ss*/, ''), ws = /s/, i = str. 길이; while (ws.test(str.charAt(--i))); return str.slice(0, i 1); }

看起来不怎么样, 动用了两次正则替换,实际速島不常惊人,主要得益于浏览器的内览器的内著优화。字符串拼接,直接상加比用Array做成成StringB?r 还快。base2类库使用这种实现。

和实现1 很敬似,但稍慢一点,主要原因是它最先是假设至少存存存个空白符。Prototype.js使용这种实现, 不过其name字为strip, 因为 Prototype的方法書是力求与R y같은 이름입니다.

以截取方式取得空白符(当然允许中间存재 空白符),总共 调用了 4个원생방법 。设计得不常巧妙,s string以两个数字 为参数。Math.max以两个数字 参数,search则返回一个数字。速tivity比上 面两个慢一点,但比下면대다数city快。

这个可以称得上实现2 简化版,就是 利用候选操work符连接两个正则。但这样做就失去了浏览器优则机会,比不上实现3。由于看来很优雅,许多类库都使用它,如JQ ry与mootools

实现5

match 是返回一个数组,因此原字符串符要求的part分就为它的元素。为了防止字符串中间的공백색符被排除,我们需要动用到不捕获性分组(?:exp)。器재处理分组上比较无力,一个字慢。所以不要迷信正则,虽然它基本上是万能的。

实现6

把符合要求 的符串中。不过效率很差,尤其是在IE6中。

和实现6很似,但用了不捕获分组进行了优点,性能效之有一点点提升。

实现8

沿着上面两个的思路进行改进,动用了不捕获分组与字符集容?顶替了*,效果不常惊人。这次性能的提升,直接秒杀fire狐。

实现9

这次是用懒惰匹配 顶替不捕获分组,在fire狐中得到改善,IE没有上次那么疯狂。

实现10

저는 只想说,搞出这个的人已经不是用牛来别,已是神一样的级别。它先是把可能的공백색符전체부列严,第一次遍历中砍掉前면적공백 ,第2개次砍掉后면적공백.전체 过程只用了indexOf与s string这个专门为处理字符串而生的原生方法,没有使用到正则。速島快得惊人,估计直逼上内部의 두 회사는 현재 IE与화狐(其他浏览器当然也毫无疑问)city有良好的表现。速島都是零毫秒级别的。

实现10已经告诉我们普文字符串截取方法是远胜于正则替换,虽然是复杂一点。但只要正则 不过于复杂,我们就可以利用浏览器对正则的优化,改善程序执行效率,如实现8은 IE의 表现입니다. 나는 통하지 않고 다른 사람이 없습니다. ,因为那个 공백 实现太长太难记了(当然如果你在打造一个类库,它绝对是首先).구현 11은 정기적인 교체를 통해 앞부분의 공백을 잘라내고, 뒷부분을 네이티브 방식으로 처리한 버전이라고 할 수 있지만, 효과는 원래 버전보다 떨어지지 않지만 속도가 매우 빠릅니다. .

구현 10과 구현 11은 쓰기 측면에서 더 좋고 향상된 버전입니다. 성능과 속도에 관한 것이 아니라 메모리와 사용의 용이성에 관한 것입니다. 두 전임자는 모두 0밀리초 수준에 있으며 앞으로는 작업과 위협에 사용할 것입니다.
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.