본문 및 댓글 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개
"댓글의 모든 링크를 삭제하고 문자만 남기기"의 경우
A태그 시작과 마감을 정규표현식으로 날리고 나니까 css 가 틀어지는 것 같아서
그것만 태그명이 아니라 클래스명을 기준으로 코드를 만들었습니다.
심심찮게 올라오는 질문인데 한번에 정리된 게시글이 없는 것 같아서
이 기회에 한번 정리해 보았습니다.
반대도 필요하기두 하구요. ~
반대란? 링크를 삭제하는게 아니라 적용하고 싶을때 즉,
게시물 내용중 특정 단어에 특정 링크가 적용되게 하고 싶을때
예) 본문 중 "링크" 라는 단어에 "https://sir.kr" 링크가 적용되게 하고 싶다면..?이란 생각을 해보네요.
본문의 경우 에디터의 url 기능으로 충분하지 않나요?
에디터에서 글자를 마우스로 긁은 후 url 버튼 클릭하면 링크주소를 입력하는 영역이 나오는데 어렵게 코드질을 할 이유가?
댓글의 경우는 필요할 수 있겠지요.
그건 댓글 영역의 문자열을 검색해서 링크라는 단어가 검색되면 검색부분을 a태그 형식으로 바꾸는 문자열 치환을 하면 되는데 그리 어려운 코드는 아닙니다만 그냥 주소만 입력하면 자동링크가 되는 데 굳이 실용성이 있을까 싶네요.
팁으로 주신 내용이 일괄처리 하는 것이라 저도 일괄로 처리하는 것을 말하는 것이였습니다.
예들들어..
게시판에 글을 1000개를 써놨는데 어느날 갑자기 1000개의 글 내용 중 "링크"라는 단어에 "sir.kr" 링크를 모두 적용하고 싶을때... 입니다. 이런경우가 얼마나 있겠습니까만..그냥 생각나서 던진 가벼운 말이였습니다.
내일은 교회를 가야 하기에 시간이 좀 그래서요.
들레아빠님 감사요.
지금보니 특정단어 링크 주는데 사용한
replaceAll 함수가 모바일 삼성 브라우저에서는 안 된다고 하네요.
꼭 필요하시다면 RegExp 내장 클래스로 new 오브젝트를 선언한 후 replace gi 에 삽입하는 방법을 구글링해서 그 부분만 수정해서 사용해야 할 것 같습니다.
삼브가 쓸데없는 부분에서 IE 를 닮아 있어 뜻밖이네요.
https://webruden.tistory.com/431
여튼 올해 안에 작은별님 같은 그누 가이드 사이트를 세팅해 보려는 생각이어서 팁들을 차곡차곡 쌓아 놓는 것이 필요하겠더라구요.
감사합니다
감사합니다.
