<body> <div id="search"> <input type="text" id="findTxt" /> <input type="checkbox" id="ignoreCase" checked /><label for="ignoreCase">대소문자 무시</label> <button onclick="enableHighlight()">강조</button> <button onclick="clearHighlight()">지우기</button> <button onclick="removeNonHighlightLine( enableHighlight() )">강조된 라인만 보여주기</button> </div> <div id="inputText"> java world<br> java 사랑 합니다.<br> 대소문자 Java 도 구분합니다.<br> 줄바꿔줘~<br> javA<br> </div> <script> var TARGET_ID = "inputText"; var BACKUP_HTML = document.getElementById(TARGET_ID).innerHTML; //for test (function() { var findTxt = "java"; document.getElementById("findTxt").value = findTxt; enableHighlight(); removeNonHighlightLine(findTxt); })(); //remove non highlight function removeNonHighlightLine(findTxt){ var target = document.getElementById(TARGET_ID); var innerHTML = target.innerHTML; var lines = innerHTML.split("<br>"); var ignoreCase = document.getElementById("ignoreCase").checked?"i":""; var results = []; lines.forEach( function(el, idx, arr){ if(el.match(eval("/"+findTxt+"/"+ignoreCase))!=null){ results.push( el ); } }); target.innerHTML = results.join("<br>"); } //clear function clearHighlight(){ var target = document.getElementById(TARGET_ID); target.innerHTML = BACKUP_HTML; } //highlight function enableHighlight() { //clearHighlight clearHighlight(); var findTxt = document.getElementById("findTxt").value; var target = document.getElementById(TARGET_ID); var startIdx = 0, _matchTxt, matchTxt, findIdx; var ignoreCase = document.getElementById("ignoreCase").checked?"i":""; while ((_matchTxt = target.innerHTML.substring(startIdx).match(eval("/"+findTxt+"/"+ignoreCase)))!=null) { matchTxt = _matchTxt[0]; findIdx = target.innerHTML.indexOf(matchTxt, startIdx); var frontHtml = target.innerHTML.substring(0, findIdx); var selHtml = "<span class='highlight'>" + target.innerHTML.substring(findIdx, findIdx + matchTxt.length) + "</span>"; // alert(findIdx + " : " + findIdx + matchTxt.length); var backHtml = target.innerHTML.substring(findIdx + matchTxt.length); target.innerHTML = frontHtml + selHtml + backHtml; startIdx = frontHtml.length + selHtml.length + 1; } return findTxt; } </script> </body>
.highlight { background-color: yellow; }