오늘은 정규식으로.. > 자유게시판

마크다운 에디터에서 Custom CSS 를 만들어 보고 있는 중입니다. (PHP도 어렵고, CSS도 어렵고,  정규식은 더 어렵고.. ? )

하여간 마크다운 에디터에서 최종 출력되는 HTML 파일에 다양한 속성이 없이 나와서..

몇가지 구분해 달라고 요청도 해보고, 나름 고쳐 볼려고 공부도 하고 있는 중인데, 

이 파트를 맞고 있는 부분이 (마크다운 엔진) GoLang으로 쓰여져 있어서 이것도 봐야 되나 하고 고민중이었는데..

오늘자 올라온 글을 보고 가능할 것 같아서 삽질을 해 봤습니다.  ㅎㅎ

대략 출력되는 HTML이 아래와 같습니다.

<h2 id="1-Heading"><a id="vditorAnchor-1-Heading" class="vditor-anchor" href="#1-Heading"></a>1 Heading</h2>

그런데 https://mdnice.com/ 라는 중국 사이트를 보면 아래와 같이 멋있는 헤딩이..

그래서 html을 체크해 보니

<h2>
  <span class="prefix"></span>
  <span class="content">1 Markdown Nice 简介</span>
  <span class="suffix"></span>
</h2>

그래서 정규식을 써서 원래 텍스트와 속성을 빼서 넣으면 될 것 같아서.. 검색시작

정규식 테스트는 여기서 https://regex101.com/

역시 스택오버플로우

https://stackoverflow.com/questions/16005413/using-regex-to-get-text-between-multiple-html-tags

정규식 그룹이 뭔지도 공부하고

그래서 만든 정규식이..

html1 = html.replace(/<h2(.*?)>(.*?)<\/h2>/gm, '<h2$1><span class="prefix"></span><span class="content">$2</span><span class="suffix"></span></h2>');

그리고 css를 적용해서 만들어 봤습니다.

추가:

h2 태그 안에 있는 a 태그와 텍스트도 분리해서 배치를 따로 해 볼까 해서 검색해서..

html1 = html.replace(/<h([1-6])(.*?)>(<a\s[^>]*[^>]*>.*?<\/a>)(.*?)<\/h[1-6]>/gm, '<h$1$2><span class="prefix"></span><span class="content">$4$3</span><span class="suffix"></span></h$1>');

이렇게 하면 헤딩에 대한 a태그 위치를 앞이 아닌 뒤에 배치할 수 있을 것 같습니다.

오른쪽으로 옮겼더니, 안되네요.  그래서 체크해 보니 CSS가 left로 고정.. 그래서 아래와 같이 수정하니.

.vditor-anchor {
  float: none;
  padding-right: 0px;
  margin-left: 0px;
}

아래와 같이 오른쪽으로 나오게..