질문/조언질답게시판
Extra Form
PHP 사용안함
CMS 사용안함

https://codepen.io/eond/pen/MWwzyBz

 

"#태그 #태그2 태그3 입니다."라는 문자열이 있을 경우

 

<a href="//태그">태그</a> <a href="//태그2">태그2</a> <a href="//태그3">태그3</a> 입니다.

 

이렇게 바꿔주고 싶은데 # 이거 찾는 거부터가 잘안되네요 ㅠㅠ

 

 

  • profile
    $('div')
      .contents() 
      .each(function() { 
        if (this.nodeType == 3) {
          this.textContent = this.textContent.replace(/#/g, '무언가');
        }
    })

    이런식으로 하면 될것 같은데, 제가 jQuery를 잘 몰라서 태그로 치환하는건 모르겠네요. 죄송합니다.

  • profile

    한번에 해결해주는 정규식을 알면 좋을 텐데 저도 잘 몰라서..
    해당 문자열을 공백 단위로 배열화하고 루프 돌려서 해시태그 있는 것들에 html 태그를 입힌 뒤에 문자열로 조인하면 좀 비효율적이려나요..

  • profile
    var html = $('div').html();
    html = html.replace(/#([^\s]+)/g, '<a href="//example.org/$1">$1</a>');
    $('div').html(html);

     

    1. 요소 내부 HTML을 문자열으로 가져온다.

    2. 정규식을 통해 문자열 내부 #ABC 를 <a>ABC</a> 로 변경한다.

    3. jQuery.html() 을 통해 태그-HTML 치환 완료한 문자열을 적용한다.

  • profile profile
    오, 역시 이렇게 잡아주는 게 훨씬 좋네요!
  • profile

    이미 태그 안에 들어 있는 # 문자는 제외해야 하기 때문에 복잡합니다.

     

    예: <p><a href="/questions/1367711#comment_1367764">#태그1</a>#태그2</p>

    이렇게 되어 있다면 #태그2만 변환해야 합니다.

    #comment_1367764는 링크 속성의 일부이고, #태그1은 이미 링크가 걸려 있기 때문이지요.

    코어에 포함된 자동 링크 애드온도 이런 이유로 상당히 복잡하게 구현되어 있습니다.

    html()을 통째로 치환하면 링크 속성 안에 또 링크가 들어가서 문법에 맞지 않는 결과가 나옵니다.

     

    맨 윗분이 올려주신 코드를 기반으로 좀더 정교하게 만드셔야 할 것 같습니다.