#타입스크립트 #정규식 quartz csl-entry

타입스크립트 정규식 수정 요청

const figureTagRegex = new RegExp(/< ?figure src="(.*)" ?>/, "g")

위에 정규식 조건을 수정해서 아래 1번, 2번에 두 경우에 모두 src 뒤에 이미지 경로만 가져오게 하고 싶어.

< figure src=“/images/20241004T180449—42012-상대성이론.png” caption=“Figure 1: 테스트” >
< figure src=“/images/20241004T180449—42012-상대성이론.png” >

타입스크립트 정규식을 아래와 같이 수정해 보세요:

const figureTagRegex = new RegExp(/< ?figure src="([^"]+)"(?:\s+caption="[^"]*")?\s*?>/, "g");

이 정규식은 src 뒤에 이미지 경로를 올바르게 추출하며, caption 속성이 있을 경우에도 처리할 수 있습니다.

뭐가 달라지는 것인지 위에 코드 설명해줄래?

물론입니다! 수정된 정규식의 각 부분을 설명드리겠습니다:

< ?figure src”([^”]+)”=:
- < ?figure: <figure 또는 < figure (공백이 있을 수도 있음)에 매칭합니다.
- src”([^”]+)“: =src 속성의 값을 추출합니다. ([^"]+)=는 큰따옴표(”=)가 아닌 문자(즉 이미지 경로)를 하나 이상 매칭하여 캡처 그룹에 저장합니다.
(?:\s+caption”[^”]”)?=*:
- (?: ... ): 캡처하지 않는 그룹을 나타냅니다.
- \s+: 하나 이상의 공백이 있는 경우를 매칭합니다.
- caption”[^”]*“: =caption 속성이 있을 경우, 큰따옴표 안의 내용을 매칭합니다. (=[^”]*=는 큰따옴표 이외의 문자를 0개 이상 매칭)
- ?: 앞의 캡처 그룹(즉, caption 부분)이 선택적임을 나타냅니다. 즉, 있을 수도 있고 없을 수도 있습니다.
=\s?>=*:
- \s*: 태그의 끝에서 공백이 있을 경우를 매칭합니다.
- >: 태그의 마지막 문자인 =>=에 매칭합니다.

결과적으로, 수정된 정규식은 두 경우 모두에서 src 뒤의 이미지 경로를 정확히 추출하며, caption 속성이 있는 경우에도 이를 무시하고 여전히 올바르게 동작합니다.

다른 방식으로 수정을 해줄래? 그냥 figure src 뒤에 스트링만 가져오도록 정규식을 수정해줘. 그렇게 해야 간단하게 동작할 수 있을 것 같다.

< figure src=“/images/20241004T180449—42012-상대성이론.png” caption=“Figure 1: 테스트” >
< figure src=“/images/20241004T180449—42012-상대성이론.png” >

더 간단한 정규식으로 수정해 보겠습니다. 아래와 같이 작성할 수 있습니다:

const figureTagRegex = new RegExp(/< ?figure src="([^"]+)"/g);

설명:

< ?figure: <figure 또는 =< figure=를 매칭합니다. 공백이 있을 수도 있습니다.
src”([^”]+)”=: src 속성의 값을 가져옵니다. ([^"]+)=는 큰따옴표(”=) 안의 문자열을 매칭하여 캡처합니다.
": 큰따옴표의 끝을 매칭합니다.

이 정규식은 src 뒤에 있는 문자열만 추출하게 되어, 보다 간단하게 동작합니다. caption 속성과 무관하게 src 값만 캡처합니다.

타입스크립트 정규식 코드 작성 요청

예전에 아래 데이터에서 src 뒤에 나오는 이미지 경로만 추출했었어.

![[images/20230625-1803-screenshot.png|640]] caption="<span class=\"figure-number\">Figure 1: </span>Interview with an Emacs Enthusiast in 2023 [Colorized]" width="100%" >

그때 사용한 정규식은 다음과 같아.

const figureTagRegex = new RegExp(/< ?figure src="([^"]+)"/g)

이번에 해결해야 할 문제는 다음 예제 블록의 텍스트 데이타에서 정보를 추출하려고 해.

<style>.csl-entry{text-indent: -1.5em; margin-left: 1.5em;}</style><div class="csl-bib-body">
  정주희. n.d. “R로 알아가는 머신러닝과 통계, 수학 - 강의자료.” Accessed July 5, 2024. <a href="https://jhjeong.mindconnect.cc/mlearn/">https://jhjeong.mindconnect.cc/mlearn/</a>.
 
  토머스 암스트롱. 2019. <i>증상이 아니라 독특함입니다: 신경다양성 안내서</i>. Translated by 강순이. <a href="http://www.yes24.com/Product/Goods/81515295">http://www.yes24.com/Product/Goods/81515295</a>.
 
</div>

여기에서 원하는 정보는 다읕과 같아. 어떻게 정규식 코드를 만들면 될까?

정주희. n.d. “R로 알아가는 머신러닝과 통계, 수학 - 강의자료.” Accessed July 5, 2024. <a href=“https://jhjeong.mindconnect.cc/mlearn/“>https://jhjeong.mindconnect.cc/mlearn/%3C/a%3E.
토머스 암스트롱. 2019. <i>증상이 아니라 독특함입니다: 신경다양성 안내서</i>. Translated by 강순이. <a href=“http://www.yes24.com/Product/Goods/81515295”>http://www.yes24.com/Product/Goods/81515295%3C/a%3E.

주어진 예제 블록에서 필요한 정보를 추출하려면 다음과 같은 정규식을 사용할 수 있습니다. 이 정규식은 div 태그 내의 각 csl-entry 항목을 찾습니다.

const cslEntryRegex = /<div class="csl-entry">(.*?)<\/div>/g;

이 정규식은 csl-entry 클래스에 해당하는 div 태그의 내용을 그룹으로 캡처합니다. 이를 통해 각 항목의 정보를 추출할 수 있습니다. 위의 정규식을 사용하여 JavaScript 또는 TypeScript 코드에서 데이터를 추출할 수 있습니다. 예를 들어:

const text = `<style>.csl-entry{text-indent: -1.5em; margin-left: 1.5em;}</style><div class="csl-bib-body">
  정주희. n.d. “R로 알아가는 머신러닝과 통계, 수학 - 강의자료.” Accessed July 5, 2024. <a href="https://jhjeong.mindconnect.cc/mlearn/">https://jhjeong.mindconnect.cc/mlearn/</a>.
 
  토머스 암스트롱. 2019. <i>증상이 아니라 독특함입니다: 신경다양성 안내서</i>. Translated by 강순이. <a href="http://www.yes24.com/Product/Goods/81515295">http://www.yes24.com/Product/Goods/81515295</a>.
 
</div>`;
 
const matches = text.match(cslEntryRegex);
 
if (matches) {
  matches.forEach(entry => {
    console.log(entry);
  });
}

이렇게 하면 각 entry의 HTML이 추출되며, 추가적인 텍스트 처리가 필요하다면 더 복잡한 문자열 매니퓰레이션을 적용할 수 있습니다.

결과 표기를 위한 수정

위의 예에서 각 엔트리 뒤에 개행문자를 넣고 싶거든. 그게 보기가 좋아서 다시 정규식을 수정해줘

각 엔트리 뒤에 개행문자를 넣으려면 정규식으로 HTML 태그를 추출한 후에 문자열을 조작하여 개행 문자를 추가하면 됩니다. 예를 들어:

const cslEntryRegex = /<div class="csl-entry">(.*?)<\/div>/g;
 
const text = `<style>.csl-entry{text-indent: -1.5em; margin-left: 1.5em;}</style><div class="csl-bib-body">
  정주희. n.d. “R로 알아가는 머신러닝과 통계, 수학 - 강의자료.” Accessed July 5, 2024. <a href="https://jhjeong.mindconnect.cc/mlearn/">https://jhjeong.mindconnect.cc/mlearn/</a>.
 
  토머스 암스트롱. 2019. <i>증상이 아니라 독특함입니다: 신경다양성 안내서</i>. Translated by 강순이. <a href="http://www.yes24.com/Product/Goods/81515295">http://www.yes24.com/Product/Goods/81515295</a>.
 
</div>`;
 
const matches = text.match(cslEntryRegex);
 
if (matches) {
  const result = matches.map(entry => entry + '\n').join('');
  console.log(result);
}

이 코드는 각 entry 뒤에 개행 문자를 추가한 후 전체를 하나의 문자열로 만들어 출력합니다.

junghanacs🧠

Table of Contents