.replace() _ 검색기능_검색한 문자에 해당하는거 background-color 입히기.

replace( )

1. 특정 문자를 찾아 원하는 문자로 치환할 수 있다.

2. replace()는 조건에 해당하는 첫번째 문자 하나만 치환.

3. 전달받은 문자를 수정하는게 아니라, 새로운 값을 만들어 반환한다 >> 새로운 변수에 그 값을 할당해야 한다.

4. 3번의 특성을 가지고 있어서, 모든 문자를 치환하려면 정규식, 즉 RegExp를 사용해서 만들어야 한다.

 

간단하게 사용하려면

변수에 내가 바꾸려는 문자열 넣어두고,

바꾸려는 문자가 포함된 문자열. replace(변수명, 바꾸려는 html내용)

이렇게 하면 됨.

 

 

나는 검색어만 색을 입힐거라,

let search = $('#search).val()

$('.product h3').each(function(i, e){

     let title = e.innerHtml;

     title.replace(search, `<span style = "background-color: yello;">${search}</span>`);

})

이렇게 함.

 

 

 

 

물론 다른 방법도 있다. 정규 표현식을 사용하는 거다. 

for(let 파라미터 of 반복시키려는 대상){  } 안에서  아래의 코드를 작성해도 작동한다. 

let regexpAllCase = new RegExp(input, 'gi')

//gi는 각각 "g"는 전역에서 일치하는 모든 패턴을 찾으라는 뜻이며, "i"는 대소문자를 무시하고 일치하는 패턴을 찾으라는 뜻입니다. "m"은 여러줄에 걸쳐서 체크 한다는 의미

\

let newStr = products.title.replace(regexpAllCase, match => `<span style='background: yellow'>${match}</span>`)

 

이건 어떻게 작동하는 거냐면, input값과 동일한 것을 찾는데, 모든패턴, 대소문자 가리지 말고 찾아줘.

그리고 그것을 background-color가 yellow인 것으로 바꿔줘 라는 말임.

 

여기서 유의할 점은 원본 데이터에 접근해서 바꾸는게 아니라, 새로 생성하기 때문에, 

그대로 사용하려면, 다시 append 해주든지 재할당 해줘야 한다. 

 

 

5. newString = str.replace(regexp|substr, newSubstr|function) 형태로 사용되는데,

//regexp|substr: 이 부분은 바꾸려는 대상을 나타내는 것입니다. 두 가지 방법으로 사용될 수 있습니다.

// 정규 표현식 (regexp): 패턴을 사용하여 문자열 내에서 일치하는 부분을 찾습니다.

// 일반 문자열 (substr): 이 문자열을 찾아서 바꿉니다.

// newSubstr|function: 이 부분은 새로운 값으로 대체하는 것을 나타내는 것입니다. 마찬가지로 두 가지 방법으로 사용될 수 있습니다.

// 문자열 (newSubstr): 찾은 부분을 이 문자열로 바꿉니다.

// 함수 (function): 찾은 부분을 처리하는 함수를 지정합니다. 이 함수는 찾은 부분을 받아서 처리 후 바꾼 값을 반환합니다.\

 

//여기서 짚고 가는 RegExp()

//정규 표현식을 생성하는 생성자 함수를 말한다.

//정규 표현식은 특정한 문자 패턴을 검색하거나 대체하는 등 문자열 조작 작업을 할 때에 사용된다.

//사용 방법은 RegExp('찾을패턴', '옵션gim같은')

//리터럴 형태로 정규표현식 생성 가능

// 리터럴 : 프로그래밍 에서 값을 직접 나타내는 표기법을 말한다.

// 정규표현식 리터럴은 정규표현식 패턴을 직접 나타내는것. '/패턴/플래그=옵션' 형태로 작성한다.

//let regexpAllCase =/input/gi; 라고 하면 될줄 알았으나 오류가 났다. ?????왜안돼?

//원인은

// 1. 저렇게 적으면 문자열 'input' 을 나타내는 것이라 작동오류

// 2. 리터럴 형태로 사용하려면 변수가 아니라 실제로 검색할 문자열 그 자체를 입력해야 함.

//new라는 키워드를 사용하지 않아도 되는 특수한 함수중 하나임.

//그럼 new는 왜 썻는가?

//new라는 키워드를 사용하는 이유

// 새로운 객체 생성하기 위해 >> 생성된 객체의 프로토타입 체인을 따라 다양한 메서드와 속성을 상속받는다. (추후 공부 필요.)

// 생성자 함수가 객체를 생성 할 때에 필요한 초기화 작업 수행

 

 

 

정규표현식, new RegExp()에 대해서는 나중에 ES6문법 공부할때 다시 정리해야겟지만,

특정한 문자패턴을 찾거나, 대체하는 등 문자열 조작작업을 할때 사용한다. 

정도만 일단 정리하자.