[jQuery] 텍스트/문자열 변경 및 검색 - indexOf, match 함수, replace 함수, split 함수, html(),text(),val() 메소드

indexOf : 문자열내에 찾을 문자열이 있는지 여부를 알고싶을 때 사용

 - "문자열".indexOf("찾을 문자")
 - 찾는 문자열이 없는 경우 : -1을 반환
   * -1이 의미 : 여기서는 -1을 확인값으로 사용하였는데 그 이유는 만약에 특정 문자열이 해당하는 텍스트 안에서 찾았다면
     if 문에서 절대 -1이 될 수 없는 0 이상의 양수 값이기 때문다. 그래서 -1은 값이 없음을 의미.
     출처 : https://webisfree.com/2015-06-22/[자바스크립트]-배열-또는-문자열에-indexof()-사용한-특정-문자-검색

 - 찾는 문자열이 있는 경우 : 글자위치를 나타내는 숫자를 반환
 - 배열에서도 사용 가능. 원하는 특정 배열값의 존재여부 등을 확인할 수 있으며, 위치값을 index로 반환

 

ex1)

var txt1 = "jQuery";

var TxtValue = txt1.indexOf('y');    //5를 반환

 

 

ex2)

var txt2 = "javascript";

if (txt2.indexOf('sc') != -1) {

//txt2에 sc가 있을 경우의 실행문

};

 

 

match() : 정규표현식에 맞는 문자열을 찾음. 문자열을 찾으면 배열로 반환하고 없으면 null 반환

 - 선택자.match(/찾을문자열/)로 검색
 - 배열에서는 사용불가. 문자열에서만 사용가능

 

ex3)

var txt3 = "Good guy Bad guy Strange guy";
if (txt3.match(/guy/)) {

//txt에 guy가 있을 경우의 실행문

};

 

 

ex4) 출처 : https://blog.naver.com/psj9102/220900724301, 원출처 : http://uyeong.tistory.com/189

var string = "Hellow I'm NoDe. Welcome to my develop Blog.";

var mat = "lo";

 

    var bool1 =  string.match(mat);

if (string.match(mat) !== null) {

alert("MATCH : " + bool1);             //lo를 반환

}

 

var bool2 = (string).search(mat);

if ((string).search(mat) !== -1) {

alert("SEARCH : " + bool2);             //3을 반환

}

 

 

ex5) 출처 : http://gnuj.tistory.com/78 (그닉의 사생활..? | [JavaScript] 알아두면 좋은 함수), 원출처 : http://uyeong.tistory.com/189 (UYEONG's Blog)

var str1 = 'IMPELLITTERI';

console.log(str1.match(/P/)); //반환값 : "P" (index: 2, input: "IMPELLITTERI")

 

var str2 = "Screaming Symphony";

console.log(str2.match(/ing/)) //반환값 : "ing" (index: 6, input: "Screaming Symphony")

 

var str3 = 'Good Guy, Bad Guy, Strange Guy';

console.log(str3.match(/Guy/g)) //반환값 - 배열 : ["Guy", "Guy", "Guy"]

console.log(str3.match(/Guy/)) //반환값 : "Guy" (index: 5, input: "Good Guy, Bad Guy, Strange Guy")

 

var str4 = 'this is just a string with some 12345 and some !#$@# meixed in.!';

console.log(str4.match(/[a-z]+/gi)); //반환값 : ["this", "is", "just", "a", "string", "with", "some", "and", "some", "meixed", "in"]

console.log(str4.match(/[a-z]+/gi)[1]); //반환값 : is

 

 

 

 

replace/replaceAll 함수

 - 특정 문자를 다른 문자로 치환
 - 바꿀 문자열을 직접 입력 또는 정규표현식을 사용
 - 사용법 : 선택자.replace("찾을 문자열", "변경할 문자열")
 - 모두 바꾸고자 할 때는 replaceAll 사용

 

ex6) myEx

$('li > p').each(function() {

var AAA = $(this).text();

$(this).text(AAA.replace('...', ''));

});

 

 

ex7) 출처 : http://gnuj.tistory.com/78 (그닉의 사생활..? | [JavaScript] 알아두면 좋은 함수), 원출처 : http://uyeong.tistory.com/189 (UYEONG's Blog)

var str5 = 'Hello, World';

str5 = str5.replace(/World/, 'MyBlog');

console.log(str5); //반환값 : Hello, MyBlog

 

var str6 = 'J!o!h!n!Smith!!~';

str6 = str6.replace(/[^A-Za-z\d_-]+/,'');         //처음나오는 특수문자 제거

console.log(str6); //반환값 : Jo!h!n!Smith!!~

 

var str7 = 'J!o!h한n !Sm글ith!!~';

str7 = str7.replace(/[^A-Za-z\d_-]+/g,'');                 //문자열 사이의 띄어쓰기 포함하여 특수문자 전부제거

console.log(str7); //반환값 : JohnSmith

 

 

 

 

jQuery의 text() 메소드를 통한 값의 직접 변경

var CatName=$("h2").text();

if (CatName=="Category: News"){

    $("h2").text("News");

}

 

.html() : 선택 요소에 html을 코드를 넣거나 받아 올 수 있음. 함수 htmlspecialchars() 적용됨.

.text() : 선택 요소의 텍스트 내용을 설정 및 받아옴

.val() : form의 선택 요소 텍스트 값을 설정 혹은 받아옴

 

예제 출처 : 제타위키 https://zetawiki.com/wiki/JQuery_val(),_text(),_html()