[Web] 정규표현식을 이용해 태그 변경하기, 문자열 중간에 태그 넣기

 

살다가 한번쯤은 만나게 될 정규표현식을 아름답게 사용하는 방법에 대해서 알아보겠습니다.

 

문자열 중간에 표시들을 태그로 치환하는 경우

<div>Hello **** *good* ** *hello*</div>
=====> 변환
<div>Hello **** <b>good</b> ** <b>hello</b></div>

 

*를 통해서 문자열들을 강조 하고 싶을때 사용하는 방법입니다. 약간의 예외를 주기 위해서 *문자열* 의 케이스라고 생각해봅니다.

 

const example = '<div>Hello **** *good* ** *hello*</div>'

const result = example.replace(/\*([\w]+)\*/g,`<b>$1</b>`)

console.log(result) // <div>Hello **** <b>good</b> ** <b>hello</b></div>

 

• ([\w]+) : 0-9, a-z, A-Z, '_' 를 포함한 문자가 적어도 1개 이상 옵니다. 이 부분은 sub group이 되고 문자열만 $1에 담기게 됩니다.
• sub group의 사이를 *로 감싸고 있다고 생각하시면 됩니다. g를 통해서 global 하게 모두 매칭되게 될 것입니다.

 

아름답게 태그만 변경하는 방법

<main>
 <div>hello</div>
 <ul className="cl">hello</ul>
 <li/>
 <table />
</main>

-------->
아래처럼 태그를 변경해주세요.

main -> 코끼리
div -> 고양이
ul -> 사슴
li -> 말
table -> 기린

<코끼리>
 <고양이>hello</고양이>
 <사슴 className="cl">hello</사슴>
 <말 />
 <기린 />
</코끼리>

 

각 태그들을 아예 다른것으로 변경하는 경우 어떻게 할 수 있을까요?

 

만약 main만 변경을 원한다면 아래처럼 하드코딩 식으로 할 수 있습니다.

`<main>hello</main>`.replace(/\<main/g,'<코끼리').replace(/\<\/main/g,'</코끼리')

// <코끼리>hello</코끼리>

 

이렇게 많아진다면 어떻게 해야할까요?

RegExp object와 template literal을 이용해주면 깔끔하게 할 수 있습니다.

 

왜 RegExp object라고 했는지는 마지막에 설명하겠습니다.

 

const swapMap = {
  main: "코끼리",
  div: "고양이",
  ul: "사슴",
  li: "말",
  table: "기린",
};

const str `<main>
 <div>hello</div>
 <ul className="cl">hello</ul>
 <li/>
 <table />
</main>
`

const result = 
Object.entries(swapMap).reduce((acc, val) => {
  const [key, value] = val;
  return acc
    .replace(new RegExp(`<${key}`, "g"), `<${value}`)
    .replace(new RegExp(`</${key}`, "g"), `</${value}`);
},str);

console.log(result)
/*
<코끼리>
 <고양이>hello</고양이>
 <사슴 className="cl">hello</사슴>
 <말/>
 <기린 />
</코끼리>
*/

 

• replace는 매번 새로운 string을 반환해서 reduce로 했습니다. 특정 변수에 넣어두고 계속 새로 할당하는 식으로 해도 됩니다. 저는 이게 더 보기 좋아서요.
• 정규표현식을 사용할때 literal notation을 사용하면 template literal을 사용할 수 없습니다. 안에는 RegExp 형태만 올 수 있습니다.
• 따라서 template literal을 활용하려면 RegExp 객체를 활용해야합니다.

 

 

• pattern의 타입을 보면 string, RegExp 입니다.

 

 

 

내용은 되게 짧지만 여러가지 방법으로 시도해보면서 많이 배울 수 있었습니다.

 

1. $n을 이용해서 replace하는 방법 (sub group을 잡을때 많이 씀)

2. replacer 함수를 이용하는 방식