jQuery.camelCase()_javascript 기술을 통해 string.replace() 함수 배우기

WBOY
풀어 주다: 2016-05-16 18:02:18
원래의
1223명이 탐색했습니다.

함수
camelCase 함수의 함수는 background-color 형식을 Camel Case 표기인 backgroundColor로 변환하는 것입니다.
이 함수는 jQuery의 데이터 함수와 CSS와 관련된 많은 함수에서 사용됩니다.

jQuery 구현

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

//정규 일치
rdashAlpha = /-([a-z])/ig,
// camelCase가 문자열을 대체할 때의 콜백 함수
fcamelCase = function( all, letter ) {
return letter.toUpperCase( ) ;
},
...
camelCase: function( string ) {
return string.replace( rdashAlpha, fcamelCase )
},

this 함수 자체는 어렵지 않고, 그냥 String 객체의 replacement 메소드를 호출하면 됩니다. 그러나 배움의 정신으로 나는 여전히 교체 방법을 연구했습니다.
데이터 참조: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/replace

String.replace() 구문
str.replace(regexp|substr, newSubStr|function[, 비표준 플래그]);

String.replace() 매개변수 설명
regexp: 정규식 검색용
substr: 문자열 검색용
newSubStr: 대체를 위한 새 문자열
함수: 콜백 함수, 함수의 반환 값은 원래 일치하는 문자열을 대체하는 데 사용됩니다.
플래그: 비표준, RegExp의 i, g, m과 유사(대소문자 무시, 전역 검색, 여러 줄 일치)

대체 개체로 문자열 지정
대체에 사용되는 문자열에 다음 패턴을 사용할 수 있습니다.
$$ => $& => 일치하는 하위 문자열 삽입
$` => 일치하는 하위 문자열 앞에 모든 문자 삽입
$' => 일치하는 하위 문자열 뒤에 모든 문자 삽입
$n / $nn => 이 모드는 유효합니다. replacement() 메소드의 첫 번째 매개변수가 RegExp이고 정규 표현식에 괄호가 포함된 경우.

함수를 대체 객체로 지정
일반적인 대체 함수: function(str,p1,p2,offset,s){}
매개변수 설명:
str: 일치하는 문자열($&와 유사)
p1,p2,...: 이 모드는 replacement() 메서드의 첫 번째 매개변수가 RegExp이고 정규식에 괄호가 포함된 경우에만 유효합니다. ($n / $nn과 유사)
offset: 일치하는 하위 문자열의 오프셋
s: 검색에 사용되는 문자열


CSS 속성의 카멜 케이스 표현 가져오기
코드 복사 코드는 다음과 같습니다.
String.prototype.camelCase=function( ){
//all은 일치하는 하위 문자열이고, [a-z]에 괄호가 있으므로 문자는 p1입니다.
return this.replace(/-([a-z])/ig,function( all, letter,offset, s ) {
return letter.toUpperCase();
});
}
var cssText = 'h2n{n border-bottom:1px solid #eee;n background-color:#bbb ;n }';
var newstr = cssText.camelCase();


일치하는 문자열의 위치 바꾸기
코드 복사 코드는 다음과 같습니다.
var re = /(w )s(w )/
var str = " John Smith";
var newstr = str.replace(re, "$2, $1");

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!