[Javascript]문자열에서 문자 찾는 몇가지 방법

문자를 찾는 방법 몇가지

1. indexOf

var stringVal = "javascript",
    substring = "java";
stringVal.indexOf(substring) !== -1;

javascript의 기본객체인 string의 indexOf를 이용하는 방법

포함하고 있는 문자의 인덱스를 반환한다.

만약 문자를 가지고 있지 않으면 -1을 반환한다.

2. includes(ES6이상 에서 적용 가능)

var stringVal = "javascript",
    substring = "java";
stringVal.includes(substring);

ES6에서 포함된 string의 includes 함수를 이용하는 방법

포함하고 있는 문자가 있으면 true, 없으면 false를 반환한다.

자세한 사항은 모질라페이지에서 

3. search

var stringVal = "Hello World",
    exp = /java/;
string.search(exp);

search함수를 사용하는 방법

포함하는 문자가 있으면 인덱스를 리턴한다.

만약 문자가 포함되어 있지 않으면 -1을 반환한다.

4. lodash 의 includes

var stringVal = "Hello World",
    substring = "Hell";
_.includes(stringVal , substring);

lodash 사용법은 홈페이지를 참조한다.

5. 정규식

var stringVal = "Hello world",
    exp = /hell/; 
exp.test(stringVal );

6. match

var stringVal = "super mario",
    exp = /mario/;
stringVal.match(exp);

찾는 문자열을 배열로 반환한다. 

실제 예제는 아래에서

JSfiddle 예제

Result탭을 누르면 결과를 확인 할 수 있습니다.

자바스크립트 URL 인코딩 시 알고 있으면 좋은 점

자바스크립트에서 URL인코딩을 할 때 보통 encodeURIComponent(str)또는 encodeURI(str)를 사용 합니다.

encodeURIComponent 함수(JavaScript)

텍스트 문자열을 URI 구성요소로 인코딩 합니다.

encodeURIComponent 함수는 인코딩된 URI를 반환합니다. 

decodeURIComponent에 결과를 전달하면 원래 문자열이 반환 됩니다.

encodeURI 함수(JavaScript)

텍스트 문자열을 유효한 URI로 인코딩 합니다.

encodeURL 함수는 인코딩된 URI를 반환합니다. decodeURI에 결과를 전달하면 원래 문자열이 반환됩니다. 

encodeURI 함수는 ":", "/", ";", "?"등의 문자를 인코딩하지 않으므로 이 문자들을 인코딩 하려면 encodeURIComponent를 사용합니다.

두 함수의 설명을 읽어보면 비슷하지만 encodeURI는 몇가지 문자를 인코딩하지 않는다고 나와있습니다.

인코딩 하지 않는 문자를 표로보면 다음과 같습니다.

표에 콤마도 같이 섞여있어서 보기가 힘들지만 각각의 인코딩함수에는 이러한 차이가 있습니다.

자바스크립트에서 문자열을 자를때 쓰는 몇가지 방법

1. substring

- "자를문자열".substring(시작인덱스, 종료인덱스)

예제

2. substr

- "자를문자열".substr(시작인덱스, 길이)

예제

3. split

- "자를-문자열".split(문자)

예제

위의 3가지 방법을 이용하여 문자열을 잘라낼수 있다.

indexOf함수까지 사용하면 다음과 같이 사용할 수 있다.

예제

랜덤함수를 이용하여 자바스크립트로 guid 생성하기.

DOM에 버튼을 하나 만들고

<button id="makeGUID">GUID만들기</button>
<input id="Result" readonly />

자바스크립트 코드를 추가 합니다.

function guid() {
  function s4() {
    return Math.floor((1 + Math.random()) * 0x10000)
      .toString(16)
      .substring(1);
  }
  return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
    s4() + '-' + s4() + s4() + s4();
}

document.getElementById("makeGUID").addEventListener('click', function() {
  document.getElementById('Result').value = guid();
})

* syntaxhilight : higlight.js

위와 같이 코드를 만들고 버튼을 클릭하면

"a101b4ce-04f4-3e30-fcca-7d06145e2276"

이런 난수들이 발생합니다.

다음은 실행 예제