구글링 고수님들에게 > 자유게시판

자유게시판

구글링 고수님들에게 정보

구글링 고수님들에게

본문

브라우저에서 콘트롤+F 눌러서 단어를 찾듯이

웹페이지에서 단어를 검색하면 해당 단어를 하이라이트해주는 기능을 알아보고 있습니다.

검색창 처럼 인풋박스와 컨펌버튼을 이용해서 단어를 검색하면 하이라이트 되는 기능을 찾으려고 하는데

구글링을 어떻게 해야 할런지 깜깜하네요.

 

"find word and highlight using script"

 해보니 마소의 워드만 잔뜩 검색이 되는 일이 발생합니다.😱

 

어떻게 검색해야 잘했다고 소문이 날까요?

추천
1

댓글 12개

이 경우는 검색한 페이지에서 검색어를 하이라이트해주는 것이군요.
저는 웹페이지 자체에서 페이지 넘김 없이 하이라이팅이 필요해서요.
<input id=myInput>
<button onclick=searchMode() style=cursor:pointer>검색하기</button>
<button onclick=startMode() style=cursor:pointer>처음으로</button>
<span id=mySpan></span>
<div id=myDiv>
1회 1930년 우루과이<br>
2회 1934년 이탈리아<br>
3회 1938년 이탈리아<br>
4회 1950년 우루과이<br>
5회 1954년 독일<br>
6회 1958년 브라질<br>
7회 1962년 브라질<br>
8회 1966년 잉글랜드<br>
9회 1970년 브라질<br>
10회 1974년 독일<br>
11회 1978년 아르헨티나<br>
12회 1982년 이탈리아<br>
13회 1986년 아르헨티나 <br>
14회 1990년 독일<br>
15회 1994년 브라질<br>
16회 1998년 프랑스<br>
17회 2002년 브라질<br>
18회 2006년 이탈리아<br>
19회 2010년 스페인<br>
20회 2014년 독일<br>
21회 2018년 프랑스<br>
</div>
<script>
startData = myDiv.innerHTML;
function searchMode() {
    if (myInput.value.trim() != "") {
        myDiv.innerHTML = startData.split(myInput.value.trim()).join("<strong style=color:red;background-color:yellow>*" + myInput.value.trim() + "*</strong>");
        mySpan.innerHTML = "<strong style=color:red>" + (startData.split(myInput.value.trim()).length - 1) + "</strong>개 검색";
    }
}
function startMode() {
    myDiv.innerHTML = startData;
    mySpan.innerHTML = myInput.value = '';
}
</script>

-----

이건 https://sir.kr/g5_plugin/9193 를 만들 때 사용한 소스에요.
제가 정규식은 먹빡이라서 배열에서 split().join() 으로 짜 본 것입니다.

<div id=myDiv> 안으로만 넣어주면 그럭저럭 가닥이 나오더라구요.
만일 소스에 자바스크립트가 들어가 있으면 전체 문자열을 로컬스토리지나 세션스토리지에 담은 후 전체 페이지 소스를 split().join() 한 다음에 버튼 클릭시 전체페이지를 document.write() 로 처리해 주면 될 꺼에요. 그때는 스토리지를 삭제하는 소스도 보태야 하구요.
<script>
startData = myDiv.innerHTML;
function searchMode() {
    if (myInput.value.trim() != "") {
        myDiv.innerHTML = startData.split(myInput.value.trim()).join("<strong style=color:red;background-color:yellow>*" + myInput.value.trim() + "*</strong>");
        mySpan.innerHTML = "<strong style=color:red>" + (startData.split(myInput.value.trim()).length - 1) + "</strong>개 검색";
    }
}
function startMode() {
    myDiv.innerHTML = startData;
    mySpan.innerHTML = myInput.value = '';
}
</script>
콘트롤+F는 파폭뿐 아니라 모든 브라우저는 물론 대부분의 프로그램에서 적용되는 단축어입니다. 저는 여러가지 용도로 여러 단어를 함께 검색할 때 이용하기 위해 스크립트가 필요하구요.
와~ 많은 분들이 올려주신 팁 들을 낼름... 했네요.
가만히 앉아서 섭취했네요. 다들 감사합니다~
전체 195,268 |RSS
자유게시판 내용 검색

회원로그인

진행중 포인트경매

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