목차 클릭해 해당 위치로 이동 관련해 고민이 생겼습니다.

목차 클릭해 해당 위치로 이동 관련해 고민이 생겼습니다.

QA

목차 클릭해 해당 위치로 이동 관련해 고민이 생겼습니다.

본문

https://sir.kr/qa/415016

세크티 님께서 좋은 소스 공유 해주셔서 일단 해당 기능을 구현했어요.

https://homzzang.com/b/free-5017

 

그런데,

제목에 하이라이트 배경색 넣은 건 못 찾더라구요.

https://homzzang.com/b/css-1

 

그래서, 이 기능을 적용해야 하나 말아야 하나 고민이 생겨버렸네요.

사실, 저 같은 경우엔 스크롤 할 때 제목이 빨리 눈에 띄는 게 중요해서

제목의 배경색 하이라이트를 포기하기엔 좀 그렇습니다. 

 

jquery 소스와 스크립트를 좀 수정하면 어떻게 잘 될 것도 같은데,

고수님들 살펴보고 가능하면 수정 팁 좀 부탁드립니다. 

 

[jquery.highlight-5.js 플러그인 소스]


jQuery.fn.highlight = function(pat) {
    function innerHighlight(node, pat) {
        var skip = 0;
        if (node.nodeType == 3) {
            var pos = node.data.toUpperCase().indexOf(pat);
            pos -= (node.data.substr(0, pos).toUpperCase().length - node.data.substr(0, pos).length);
            if (pos >= 0) {
                var spannode = document.createElement('span');
                spannode.className = 'highlight';
                var middlebit = node.splitText(pos);
                var endbit = middlebit.splitText(pat.length);
                var middleclone = middlebit.cloneNode(true);
                spannode.appendChild(middleclone);
                middlebit.parentNode.replaceChild(spannode, middlebit);
                skip = 1;
            }
        }
        else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
            for (var i = 0; i < node.childNodes.length; ++i) {
                i += innerHighlight(node.childNodes[i], pat);
            }
        }
        return skip;
    }
    return this.length && pat && pat.length ? this.each(function() {
        innerHighlight(this, pat.toUpperCase());
    }) : this;
};
jQuery.fn.removeHighlight = function() {
    return this.find("span.highlight").each(function() {
        this.parentNode.firstChild.nodeName;
        with (this.parentNode) {
            replaceChild(this.firstChild, this);
            normalize();
        }
    }).end();
};

 

[출력 스크립트]


<?php
add_javascript('<script src="'.G5_JS_URL.'/jquery.highlight-5.js"></script>', 0);
?>
<script>
    $(document).ready(function () {
        $("#view_content a").click(function (e) {
            // e.preventDefault();
            var href = $(this).attr('href');
            if(href!='#'){
                return true;
            }
            var $wrap = $("#view_content");
            var title = $(this).text();
            $wrap.highlight(title);
            var first_sch = $wrap.find('span.highlight').eq(1)
            if(first_sch){
                $("body,html").animate(
                    {scrollTop: first_sch.offset().top - (window.screen.height/2-100)},
                    1200 //speed
                );
                $("span.highlight").removeClass('highlight');
                return false;
            }
        })
    })
</script>

 

이 질문에 댓글 쓰기 :

답변 2

본문 텍스트에 그냥 백그라운드 넣어서 테스트해 봤습니다. font-size:20px; 로 되어 있는 곳 옆에

 

background: #ffff00을 각각 넣은 것입니다.

thumb-800597403_1622863878.4836_730x708.gif

 

제목의 배경은 그냥 글에 넣으시면 되지 않을 까요?

 

위의 highlight는 위치를 찾아가기 위한 것 같은데..  

위의 hightlight를 location등으로 변경해 보세요

제가 초보라 그런 걸 잘 할 줄 몰라용. ^^;
대략, 아래 라인과 관련된 부분을 수정해야 하는 건 알겠는데.
정확히 어떻게 수정해야 하는지는 잘 모르겠습니다.

$wrap.highlight(title);
var first_sch = $wrap.find('span.highlight').eq(1)

목차에 배경색을 넣어보라는 말씀이신가요?
테스트 삼아 목차에 같은 위치에 넣어봤는데, 안 되네요.

위 소스 원리가..
a태그에서 텍스트 추출해서 그 텍스트와 동일한 텍스트가 있는 가장 첫 번째 span에 highlight 클래스 추가해 해당 위치로 이동시키는 것 같은데...
배경색을 넣으면 텍스트들이 하나의 span으로 묶여지지 않아서 그런 듯 싶어요.

따라서 span에 대해서 highlight 추가할 게 아니라, 그 상위 부모요소인 p를 대상으로 해서 그 안의 텍스트만 추출해 비교 가능하게 수정해야 할 것 같은데....이게 제 내공으로 해결 불가라...^^;;

<p>
 <span>제목</span>
</p>
라고 하면 <span class="highlight">제목</span> 식으로 추가되었다가 빠질 것 같습니다.

<span style="background: #ffff00">제목</span> 으로 하면
sytle은 안 건드리기 때문에 아래 제목은 하이라이트로 유지 될것 같습니다.

문제는
제가 전체를 배경색으로 하는 게 아니라 중간의 중요 키워드에 대해서만 드래그 선택 후 에디터로 배경색을 넣는데,
(예) https://homzzang.com/b/css-1

이 과정에서 중요 키워드 부분이 span으로 한번 더 중첩적으로 묶이면서 배경색이 들어가다 보니 동일 문자열을 찾지 못 하고 있거든요.
그래서,
제 생각엔, span의 상위의 p에 대해서 그안의 텍스트만 추출해 값을 비교해주면 될 것 같은데.....
그게 어려운 문제라....

답변을 작성하시기 전에 로그인 해주세요.
전체 1,020
QA 내용 검색

회원로그인

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