JavaScript로 HTML 페이지 내 검색을 구현하는 방법

JavaScript는 HTML 페이지 내 검색을 구현합니다

인터넷의 급속한 발전과 함께 웹 페이지의 수도 늘어나고 있습니다. 사용자가 필요한 콘텐츠를 빠르게 찾을 수 있도록 일부 웹페이지에 검색 엔진이 추가되었습니다. 그러나 이러한 기능이 없는 간단한 웹페이지도 있습니다. 이 기사에서는 JavaScript를 사용하여 HTML 페이지 내 검색을 구현하는 방법을 소개합니다.

1. 요구 사항 분석

구현해야 할 기능은 매우 간단합니다. HTML 페이지에 키워드를 입력하고 검색 버튼을 클릭한 다음 키워드가 포함된 텍스트를 강조 표시합니다.

2. 구현 과정

간단한 HTML 페이지를 예로 들어 페이지 내 검색 기능을 구현하는 방법을 소개하겠습니다.

1. HTML 페이지

우리 HTML 페이지는 다음과 같습니다:

nbsp;html>


    <title>JavaScript实现页内搜索</title>


    <h1>这是一个标题</h1>
    <p>这是一段文字，其中包含了<span>重要信息</span>和其他无关信息。</p>
    <p>这是另一段文字，其中也包含了<span>重要信息</span>和其他无关信息。而且有一些<span>重要信息</span>是重复的。</p>
    <p>这是最后一段文字，没有任何<span>重要信息</span>。</p>
    <input>
    <button>搜索</button>

2. JavaScript 구현

검색 기능을 구현하려면 페이지에 JavaScript 코드를 추가해야 합니다. 코드는 다음과 같습니다:

<script>
function searchWord() {
    // 获取搜索框中的关键字
    var keyword = document.getElementById(&#39;keyword&#39;).value;
    // 获取所有的p标签
    var pTags = document.getElementsByTagName(&#39;p&#39;);
    // 遍历所有p标签
    for (var i = 0; i < pTags.length; i++) {
        // 获取当前p标签中的文本内容
        var text = pTags[i].innerText;
        // 判断文本内容中是否包含关键字
        if (text.indexOf(keyword) !== -1) {
            // 如果包含关键字，将关键字高亮显示
            var html = text.replace(new RegExp(keyword, &#39;g&#39;), &#39;<span style="background-color: yellow;">&#39; + keyword + &#39;&#39;);
            pTags[i].innerHTML = html;
        }
    }
}
</script>

먼저 검색창에서 키워드를 가져온 다음 페이지의 모든 p 태그를 가져옵니다. 다음으로 모든 p 태그를 순회하여 각 p 태그의 텍스트 내용을 얻고 텍스트 내용에 키워드가 포함되어 있는지 확인합니다. 키워드가 포함된 경우 해당 키워드를 강조 표시합니다. 마지막으로 수정된 텍스트 내용을 다시 p 태그에 넣습니다.

3. 테스트 결과

위의 코드를 실행하고 "중요"라는 키워드를 입력하면 검색 버튼을 클릭하면 "중요"라는 키워드가 포함된 텍스트가 페이지에 강조 표시됩니다. 아래 그림과 같이

[](https://postimg.cc/PNwqW7qQ)

4. 성능 최적화

검색 기능을 구현한 후 일부 성능 최적화를 수행할 수도 있습니다.

1. 실행 효율성 최적화

텍스트를 검색할 때 indexOf() 함수를 사용하여 문자열에 키워드가 포함되어 있는지 확인합니다. 그러나 이 기능은 덜 효율적으로 수행됩니다. 따라서 이 함수 대신 정규식을 사용할 수 있습니다. 아래와 같이

if (text.match(new RegExp(keyword, 'gi'))) {
    // ...
}

2. 가독성 최적화

버튼의 onclick 이벤트에 검색 기능을 넣었습니다. 이렇게 검색 기능을 구현할 수는 있지만 코드 가독성이 좋지 않습니다. 검색 기능을 분리하여 양식의 제출 이벤트에 바인딩할 수 있습니다. 사용자가 Enter 키를 누를 때 검색 이벤트가 트리거될 수도 있습니다. 코드는 다음과 같습니다.

<script>
function searchWord() {
    // ...
}

document.querySelector(&#39;form&#39;).addEventListener(&#39;submit&#39;, function (event) {
    event.preventDefault();
    searchWord();
});
</script>

5. 요약

본 글에서는 자바스크립트를 이용해 html 페이지 내 검색 기능을 구현하는 방법을 소개합니다. 이 기능은 간단하지만 페이지에서 주요 정보를 빠르게 찾아야 할 때 매우 유용합니다. 코드 최적화를 통해 검색 효율성과 가독성을 향상시킬 수 있습니다.

위 내용은 JavaScript로 HTML 페이지 내 검색을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!