초초초초초보개발자
50
2021-05-04 17:26:37
3
84

[html] 태그안의 태그 문자를 구별하는 방법이 있나요?


현재 xml을 읽어 html로 만드는 작업을 진행중입니다.(동적 생성)

<para>
     귀여운 동물에는 <subpara>토끼(Rabbit)</subpara>와
     <subpara>다람쥐(Squirrel)</subpara>가 있다.
</para>

위에 이런식으로 생긴 xml 태그를 html로 바꾸면서 ()안에 영어에 링크를 걸어야합니다. 

<div>
     귀여운 동물에는 토끼(<a href="#">Rebbit</a>)와 다람쥐(<a href="#">
     Squirrel</a>가 있다.
</div>

이런식으로 만들고 싶은데..

<para> 태그안의 <subpara>태그 밖의 글자를 따로 읽는 방법이 있을까요..?

고수님들 알려주세요ㅠㅠㅠ...

0
  • 답변 3

  • 컴포지트
    2k
    2021-05-04 17:40:29 작성 2021-05-04 17:41:27 수정됨

    <subpara> 밖에 있는 태그 없는 내용을 DOM 에서는 TextNode 라고 합니다.

    따라서 <subpara> 태그를 DOM 으로 선택해서 previousSibling 속성을 호출하면 그 텍스트를 선택할 수 있습니다.

    예를 들어, 본문에 토끼 내용이 들어간 <subpara> 태그의 previousSibling 속성 호출 시 내용은 '귀여운 동물에는' 이 들어갑니다. 이는 textContent 속성으로 가져올 수 있습니다.

    자바스크립트 DOM 기준입니다. Node.previousSibling - Web API | MDN (mozilla.org)

  • yunjae830
    72
    2021-05-04 18:00:56

    javascript replaceall 함수로 "(" 문자열은

    "(<a>" 로 바꾸고 

    ")" 문자열은 

    "</a>)" 로 바꾸면 될것 같은데요?


  • 초초초초초보개발자
    50
    2021-05-06 10:25:11

    모두 답변 감사드립니다!

    문자열을 바꾸려니까 ()가 없는 경우도 있더라구요...ㅠㅠ

    그래서 컴포지트님 말씀대로 text노드랑 subpara 노드를 구분해서 subpara 노드에 링크를 거는 방식으로 진행했습니다! 덕분에 html node에 대해 배웠습니다. 감사합니다ㅎㅎ!

  • 로그인을 하시면 답변을 등록할 수 있습니다.