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

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

페이지 정보

작성자

들레아빠쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물

쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물

작성일 25-06-22 17:52 조회 292 댓글 0

본문

간혹 심심찮게 올라오는 질문이 게시판의 본문이나 댓글에서 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 } ?>

댓글목록 0

등록된 댓글이 없습니다.

댓글쓰기

웹에디터 시작

<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

if(G5_COMMUNITY_USE === false) {
    define('G5_IS_COMMUNITY_PAGE', true);
    include_once(G5_THEME_SHOP_PATH.'/shop.head.php');
    return;
}

include_once(G5_THEME_PATH.'/head.sub.php');
include_once(G5_LIB_PATH.'/latest.lib.php');
include_once(G5_LIB_PATH.'/outlogin.lib.php');
include_once(G5_LIB_PATH.'/poll.lib.php');
include_once(G5_LIB_PATH.'/visit.lib.php');
include_once(G5_LIB_PATH.'/connect.lib.php');
include_once(G5_LIB_PATH.'/popular.lib.php');
include_once(G5_THEME_PATH.'/lib/message.php');
//add_javascript('<script src="'.G5_THEME_JS_URL.'/jquery.mobile.events.js"></script>', 0);
if($bo_table !== 'gallery_you' && get_switch_status($member['mb_id'].'_1'))include_once(G5_THEME_PATH.'/lib/background_youtube.php');
?>

<?php
    if(defined('_INDEX_')) { // index에서만 실행
        include G5_MOBILE_PATH.'/newwin.inc.php'; // 팝업레이어
    } ?>

<?php @include_once(G5_LIB_PATH.'/menu_class.php'); ?>
        <div id="gnb" class="hd_div">
            <button type="button" id="gnb_close" class="hd_closer"><span class="sound_only"><?php echo __('메뉴 닫기')?></span><i class="fa fa-times" aria-hidden="true"></i></button>
			<?php echo outlogin('theme/basic'); // 외부 로그인 ?>
            <?php if(get_switch_status($member['mb_id'].'_8')) { ?>
            <ul id="gnb_1dul">
            <?php
            $menu_datas = get_menu_db(1, true);
			$i = 0;
			foreach( $menu_datas as $row ){
				if( empty($row) ) continue;
            ?>
                <li class="gnb_1dli">
                    <a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>" class="gnb_1da"><?php echo __($row['me_name']) ?></a>
                    <?php
                    $k = 0;
                    foreach( (array) $row['sub'] as $row2 ){
						if( empty($row2) ) continue;
                        if($k == 0)
                            echo '<button type="button" class="btn_gnb_op"><span class="sound_only">하위분류</span></button><ul class="gnb_2dul">'.PHP_EOL;
                    ?>
                        <li class="gnb_2dli"><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>" class="gnb_2da"><span></span><?php echo __($row2['me_name']) ?></a></li>
                    <?php
					$k++;
                    }	//end foreach $row2

if($k > 0)
                        echo '</ul>'.PHP_EOL;
                    ?>
                </li>
            <?php
			$i++;
            }	//end foreach $row

if ($i == 0) {  ?>
                <li id="gnb_empty"><?php echo __('메뉴 준비 중입니다.') ?><?php if ($is_admin) { ?> <br><a href="<?php echo G5_ADMIN_URL; ?>/menu_list.php"><?php echo __('관리자모드 > 환경설정 > 메뉴설정') ?></a>에서 설정하세요.<?php } ?></li>
            <?php } ?>
            <?php if (defined('G5_USE_SHOP') && G5_USE_SHOP) { ?>
                <li class="gnb_1dli"><a href="<?php echo G5_SHOP_URL ?>" class="gnb_1da"> <?php echo __('쇼핑몰')?></a></li>
            <?php } ?>
            </ul>
            <?php } else { ?>
            <?php include_once(G5_LIB_PATH.'/menu_class.php');?>
            <?php } ?>
            <ul id="hd_nb">
            	<li class="hd_nb1"><a href="<?php echo G5_BBS_URL ?>/faq.php" id="snb_faq"><i class="fa fa-question" aria-hidden="true"></i>FAQ</a></li>
                <li class="hd_nb2"><a href="<?php echo G5_BBS_URL ?>/qalist.php" id="snb_qa"><i class="fa fa-comments" aria-hidden="true"></i><?php echo __("1:1문의"); ?></a></li>
                <li class="hd_nb3"><a href="<?php echo G5_BBS_URL ?>/current_connect.php" id="snb_cnt"><i class="fa fa-users" aria-hidden="true"></i><?php echo __("접속자"); ?> <span><?php echo connect('theme/basic'); // 현재 접속자수 ?></span></a></li>
                <li class="hd_nb4"><a href="<?php echo G5_BBS_URL ?>/new.php" id="snb_new"><i class="fa fa-history" aria-hidden="true"></i><?php echo __("새글"); ?></a></li>   
            </ul>
        </div>

<button type="button" id="user_btn" class="hd_opener"><i class="fa fa-search" aria-hidden="true"></i><span class="sound_only"><?php echo __("사용자메뉴"); ?></span></button>
        <div class="hd_div" id="user_menu">
            <button type="button" id="user_close" class="hd_closer"><span class="sound_only"><?php echo __("메뉴 닫기"); ?></span><i class="fa fa-times" aria-hidden="true"></i></button>
            <div id="hd_sch">
                <h2><?php echo __("사이트 내 전체검색"); ?></h2>
                <form name="fsearchbox" action="<?php echo G5_BBS_URL ?>/search.php" onsubmit="return fsearchbox_submit(this);" method="get">
                <input type="hidden" name="sfl" value="wr_subject||wr_content">
                <input type="hidden" name="sop" value="and">
                <input type="text" name="stx" id="sch_stx" placeholder="<?php echo __("검색어를 입력해주세요"); ?>" required maxlength="20">
                <button type="submit" value="<?php echo __("검색"); ?>" id="sch_submit"><i class="fa fa-search" aria-hidden="true"></i><span class="sound_only"><?php echo __("검색"); ?></span></button>
                </form>

// 검색에 많은 부하가 걸리는 경우 이 주석을 제거하세요.
                    var cnt = 0;
                    for (var i = 0; i < stx.length; i++) {
                        if (stx.charAt(i) == ' ')
                            cnt++;
                    }

if (cnt > 1) {
                        alert("<?php echo __("빠른 검색을 위하여 검색어에 공백은 한개만 입력할 수 있습니다."); ?>");
                        f.stx.select();
                        f.stx.focus();
                        return false;
                    }
                    f.stx.value = stx;

return true;
                }
                </script>
            </div>
            <?php echo popular('theme/basic'); // 인기검색어 ?>
            <div id="text_size">
            
                <button id="size_down" onclick="font_resize('container', 'ts_up ts_up2', '', this);" class="select"><img src="<?php echo G5_URL; ?>/img/ts01.png" width="20" alt="기본"></button>
                <button id="size_def" onclick="font_resize('container', 'ts_up ts_up2', 'ts_up', this);"><img src="<?php echo G5_URL; ?>/img/ts02.png" width="20" alt="크게"></button>
                <button id="size_up" onclick="font_resize('container', 'ts_up ts_up2', 'ts_up2', this);"><img src="<?php echo G5_URL; ?>/img/ts03.png" width="20" alt="더크게"></button>
            </div>
        </div>

$(".hd_opener").on("click", function() {
                var $this = $(this);
                var $hd_layer = $this.next(".hd_div");

if($hd_layer.is(":visible")) {
                    $hd_layer.hide();
                    $this.find("span").text("열기");
                } else {
                    var $hd_layer2 = $(".hd_div:visible");
                    $hd_layer2.prev(".hd_opener").find("span").text("열기");
                    $hd_layer2.hide();

$hd_layer.show();
                    $this.find("span").text("닫기");
                }
            });

$("#container").on("click", function() {
                $(".hd_div").hide();

});

$(".btn_gnb_op").click(function(){
                $(this).toggleClass("btn_gnb_cl").next(".gnb_2dul").slideToggle(300);
                
            });

$(".hd_closer").on("click", function() {
                var idx = $(".hd_closer").index($(this));
                $(".hd_div:visible").hide();
                $(".hd_opener:eq("+idx+")").find("span").text("열기");
            });
        });
        </script>
        
    </div>
</header>

<div id="container">
    <?php if (!defined("_INDEX_")) { ?>
    	<h2 id="container_title" class="top" title="<?php echo __(get_text($g5['title'])); ?>">
    		<a href="javascript:history.back();"><i class="fa fa-chevron-left" aria-hidden="true"></i><span class="sound_only"><?php echo __("뒤로가기")?></span></a> <?php echo __(get_head_title($g5['title'])); ?>
    	</h2>
    <?php } @include_once(G5_LIB_PATH.'/category.php');

웹 에디터 끝

이름 필수 비밀번호 필수

자동등록방지

자동등록방지 숫자를 순서대로 입력하세요.

비밀글

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

사이트 내 전체검색

뒤로가기 질문답변

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

페이지 정보

본문

댓글목록 0

사이트 정보