Please Enable JavaScript!
Mohon Aktifkan Javascript![ Enable JavaScript ]

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

본문 바로가기

사이트 내 전체검색

뒤로가기 자유게시판

후기 오늘은 정규식으로..

본문

마크다운 에디터에서 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/ 라는 중국 사이트를 보면 아래와 같이 멋있는 헤딩이..

 

800595458_1588353771.4585.png

 

그래서 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를 적용해서 만들어 봤습니다.

800595458_1588354445.4276.png

 

추가:

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;
}

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

800595458_1588541743.1225.png

추천1 비추천 0

댓글목록 2

미키손님의 댓글

no_profile 미키손 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 아이피 (109.♡.♡.79) 작성일

잘 배우고 갑니다

만수킴님의 댓글

만수킴 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 아이피 (175.♡.♡.125) 작성일

마젠토님의 마크다운 에디터와 정규식 사랑은 각별하신것같아요~

전체 87건 4 페이지
게시물 검색
Copyright © apachezone.com. All rights reserved.

사이트 정보

사이트명 : apachezone.com
개인정보관리책임자 : JOO SUNG

PC 버전으로 보기