본문 및 댓글 a태그 타겟 바꾸기 및 링크 삭제 > 그누보드5 팁자료실

그누보드5 팁자료실

본문 및 댓글 a태그 타겟 바꾸기 및 링크 삭제 정보

본문 및 댓글 a태그 타겟 바꾸기 및 링크 삭제

본문

 

간혹 심심찮게 올라오는 질문이 게시판의 본문이나 댓글에서 a태그의 타겟을 바꾸거나

a태그의 문자만 취하고 링크 부분을 삭제하는 것을 물어오는 분들이 꽤 되어서 정리해 봅니다.

프론트에서 바닐라 자바스크립트로 코드를 짜 보았습니다.

소스는 view.skin.php 또는 view_comment.skin.php 두 문서 중 문서의 위치에 상관없이 문서의 아무 곳에나 입력해도 괜찮습니다.

 

----------

 

1. 본문

 

1) 본문의 모든 링크를 현재창으로 열기


<script>
document.addEventListener("DOMContentLoaded", function() {
    for (mainA of bo_v_con.getElementsByTagName("a")) mainA.target = "_self";
} );
</script>

-----------

2) 본문의 모든 링크를 새창으로 열기


<script>
document.addEventListener("DOMContentLoaded", function() {
    for (mainA of bo_v_con.getElementsByTagName("a")) mainA.target = "_blank";
} );
</script>

----------

3) 본문의 모든 링크를 삭제하고 문자만 남기기


<script>
document.addEventListener("DOMContentLoaded", function() {
    bo_v_con.innerHTML = bo_v_con.innerHTML.replace(/<(\/a|a)([^>]*)>/gi, "");
} );
</script>

 

----------

 

2. 댓글

 

1) 댓글의 모든 링크를 현재창으로 열기


<script>
document.addEventListener("DOMContentLoaded", function() {
    for (commentA of bo_vc.getElementsByTagName("a")) commentA.target = "_self";
} );
</script>

-----------

2) 댓글의 모든 링크를 새창으로 열기


<script>
document.addEventListener("DOMContentLoaded", function() {
    for (commentA of bo_vc.getElementsByTagName("a")) commentA.target = "_blank";
} );
</script>

----------

3) 댓글의 모든 링크를 삭제하고 문자만 남기기


<script>
document.addEventListener("DOMContentLoaded", function() {
    for (commentA of bo_vc.getElementsByClassName("cmt_contents")) commentA.innerHTML = commentA.innerHTML.replace(/<(\/a|a)([^>]*)>/gi, "");
} );
</script>

 

----------

 

3. 본문과 댓글을 같이 쓸 경우에는 코드를 따로 분리하지 말고 아래처럼 사용하세요.

 


document.addEventListener("DOMContentLoaded", function() {
    bo_v_con.innerHTML = bo_v_con.innerHTML.replace(/<(\/a|a)([^>]*)>/gi, "");
    for (commentA of bo_vc.getElementsByTagName("a")) commentA.target = "_blank";
} );

 

----------

 

그누순정 기준입니다. 빌더나 테마는 적용되지 않을 수도 있습니다.^^

 

----------

----------

----------

 

댓글에서 호텔천사님이 말한 게시글 중 특정 단어 전부에 임의로 링크를 거는 함수를 만들어 보았습니다.

2022년 3월 21일 삼성 모바일 브라우저에서 안 먹히는 부분을 수정하였습니다.

 

----------

 

1. 본문


<script>
function aMain() {
    bo_v_con.innerHTML = bo_v_con.innerHTML.replace(new RegExp(arguments[0], "gi"), "<a href=" + arguments[1] + " target=" + arguments[2] + ">" + arguments[0] + "</a>");
}
document.addEventListener("DOMContentLoaded", function() {
    aMain("호텔천사", "https://url.kr/", "_blank");
    aMain("sinbi", "https://homzzang.com/", "_self");
} );
</script>

 

aMain("단어", "경로", "타겟"); 이런 형태로 몇개를 넣어도 상관이 없습니다.

아래 댓글의 경우는 함수명만 다르고

aComment("단어", "경로", "타겟"); 이렇게 유사한 패턴으로 사용하세요.

 

----------

 

2. 댓글


<script>
function aComment() {
    for (commentA of bo_vc.getElementsByClassName("cmt_contents")) commentA.innerHTML = commentA.innerHTML.replace(new RegExp(arguments[0], "gi"), "<a href=" + arguments[1] + " target=" + arguments[2] + ">" + arguments[0] + "</a>")
}
document.addEventListener("DOMContentLoaded", function() {
    aComment("호텔천사", "https://url.kr/", "_blank");
    aComment("sinbi", "https://homzzang.com/", "_self");
} );
</script>

 

----------

 

특정단어의 링크 치환은 모든 링크를 핸들링 한 다음에 마지막 코드로 넣어주어야 합니다.

만일 특정게시글에만 적용을 하고 싶으면 여분필드를 하나 만들고...

그 여분필드에 yes 를 입력한 게시글만 적용되게끔 php에서 이프문으로 감아버리면 되겠습니다.

역시 동일한 원리이지만 체크박스나 라디오버튼으로도 충분히 가능하겠지요.

 

<?php if (여분필드 == "yes") { ?>

    자바스크립트 코드

<?php } ?>

추천
12

댓글 23개

다른 5개의 패턴은 동일한데...
"댓글의 모든 링크를 삭제하고 문자만 남기기"의 경우
A태그 시작과 마감을 정규표현식으로 날리고 나니까 css 가 틀어지는 것 같아서
그것만 태그명이 아니라 클래스명을 기준으로 코드를 만들었습니다.
심심찮게 올라오는 질문인데 한번에 정리된 게시글이 없는 것 같아서
이 기회에 한번 정리해 보았습니다.
멋진 팁입니다. 이런거 필요할때 있죠..^^
반대도 필요하기두 하구요. ~

반대란? 링크를 삭제하는게 아니라 적용하고 싶을때 즉,
게시물 내용중 특정 단어에 특정 링크가 적용되게 하고 싶을때
예) 본문 중 "링크" 라는 단어에 "https://sir.kr" 링크가 적용되게 하고 싶다면..?이란 생각을 해보네요.

본문의 경우 에디터의 url 기능으로 충분하지 않나요?
에디터에서 글자를 마우스로 긁은 후 url 버튼 클릭하면 링크주소를 입력하는 영역이 나오는데 어렵게 코드질을 할 이유가?
댓글의 경우는 필요할 수 있겠지요.
그건 댓글 영역의 문자열을  검색해서 링크라는 단어가 검색되면 검색부분을 a태그 형식으로 바꾸는 문자열 치환을 하면 되는데 그리 어려운 코드는 아닙니다만 그냥 주소만 입력하면 자동링크가 되는 데 굳이 실용성이 있을까 싶네요.
매번 느끼지만 제가 말주변이 없는것 같아요. ^^

팁으로 주신 내용이 일괄처리 하는 것이라 저도 일괄로 처리하는 것을 말하는 것이였습니다.

예들들어..
게시판에 글을 1000개를 써놨는데 어느날 갑자기 1000개의 글 내용 중 "링크"라는 단어에 "sir.kr" 링크를 모두 적용하고 싶을때... 입니다. 이런경우가 얼마나 있겠습니까만..그냥 생각나서 던진 가벼운 말이였습니다.
ㅋㅋ 그냥 생각난거 이야기 한건데.. 감사합니다. 이런게 있음 좋겠다였는데 다른분들도 좋아하실거에요 ^^

들레아빠님 감사요.
지금보니 특정단어 링크 주는데 사용한
replaceAll 함수가 모바일 삼성 브라우저에서는 안 된다고 하네요.
꼭 필요하시다면 RegExp 내장 클래스로 new 오브젝트를 선언한 후 replace gi 에 삽입하는 방법을 구글링해서 그 부분만 수정해서 사용해야 할 것 같습니다.
삼브가 쓸데없는 부분에서 IE 를 닮아 있어 뜻밖이네요.

https://webruden.tistory.com/431
안녕하세요.
저 때문에 밤잠 설친건 아닌지요? ^^ 이렇게 신경써 주셔서 감사 드립니다.
여긴 이제 해가 쪼매 뜰려고 하네요. 빨리 봄이 왔으면 좋겠네요 ^^
별로 시간 안 걸리는 팁입니다.
여튼 올해 안에 작은별님 같은 그누 가이드 사이트를 세팅해 보려는 생각이어서 팁들을 차곡차곡 쌓아 놓는 것이 필요하겠더라구요.
전체 2,428 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT