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

댓글목록

profile_image

미키손님의 댓글

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

잘 배우고 갑니다

profile_image

만수킴님의 댓글

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

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

Total 386건 18 페이지
자유게시판 목록
번호 제목 글쓴이 조회 추천 비추천 날짜
131 정보 마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 18850 1 0 05-06
130 토픽 마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 22364 1 0 05-05
129 토픽 마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 31938 0 0 05-04
128 토픽 마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 22815 0 0 05-03
127 토픽 마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 49623 0 0 05-02
126 토픽 마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 25948 0 0 05-01
열람중 후기 마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 30087 1 0 05-01
124 정보 마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 50515 0 0 04-30
123 정보 마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 40735 0 0 04-29
122 정보 마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 92073 0 0 04-29
121 정보
알림 기능. 댓글4
마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 38314 0 0 04-28
120 토픽 마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 78826 1 0 04-26
119 제보
알림에서 댓글5
마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 40469 0 0 04-26
118 제보 마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 13157 0 0 04-17
117 정보 마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 14234 0 0 04-17

검색

회원로그인

회원가입
QnA nanoomihost. dnsever. dnszi.

사이트 정보

포인트 정책
포인트 순위
사이트명 : 아파치존
개인정보관리책임자 : JOO SUNG

접속자집계

오늘
7,645
어제
11,873
최대
176,238
전체
6,052,696
Copyright © apachezone.com. All rights reserved.