Question

我被分配了作业，我必须在其中获取给定的HTML文件并创建一个Javascript文件，该文件将搜索div类中的单词。如果要找到这个单词，它会以黄色突出显示它并返回它被找到的次数。

Answer 1

所以实际上Regex非常必要，因为它需要不区分大小写，我会这样做：

＆＃13;

function Search() 
{
    var elements = document.querySelectorAll(".main");
    let search = document.getElementById('searchtext').value;
    for (var i = 0; i < elements.length; i++)
    {
        if(elements[i].innerHTML.toLowerCase().indexOf(search.toLowerCase()) > - 1)
        {
            alert("found");
        }
    }

}

document.getElementById('searchbutton').addEventListener('click', Search);
function highlight() 
{
    var text = document.getElementById('searchtext').value;

    if(text)
    {
        let elements = document.querySelectorAll(".main");
        for (var i = 0; i < elements.length; i++)
        {
            if (elements[i].getAttribute('data-originalText')) {
                 elements[i].innerHTML = elements[i].getAttribute('data-originalText');
            } else {
                elements[i].setAttribute('data-originalText', elements[i].innerHTML);
            }
            var main = elements[i].innerHTML;
            var new_text = main.replace(new RegExp('(' + text + ')', 'gi'), '<span class="highlight">$1</span>');
            elements[i].innerHTML = new_text;
            alert(elements[i].querySelectorAll('.highlight').length + ' occurences found');
        }
        
    }
}

document.getElementById('searchbutton').addEventListener('click', highlight);

＆＃13;

.highlight {
    background-color: yellow;
}

＆＃13;

<body>

        <div class="main">

            <p>The Phoenix Suns are a professional basketball team based in Phoenix, Arizona. They are members of the ...</p>

            <p>The Suns have been generally successful since they began play as an expansion team in 1968. In forty years of play they have posted ...</p>

            <p>On January 22, 1968, the NBA awarded expansion franchises to an ownership group from Phoenix and one from Milwaukee. ...</p>

            <ul>
                <li>Richard L. Bloch, investment broker/real estate developer...</li> 
                <li>Karl Eller, outdoor advertising company owner and former...</li>
                <li>Donald Pitt, Tucson-based attorney;</li>
                <li>Don Diamond, Tucson-based real estate investor.</li>
            </ul>

        <p>Page by New Person. <br /> Some (all) information taken from Wikipedia.</p>

        </div>

        <hr />

        <div>

            Search for text:
            <input id="searchtext" type="text"  /> 
            <button id="searchbutton">Search</button>
        </div>

    </body>

＆＃13;

Answer 2

使用类和一些文字，搜索栏和按钮添加 div ：

<div class='my_text'>
Homework, or a homework assignment, is a set of tasks assigned to students by their teachers to be completed outside the class. Common homework assignments may include a quantity or period of reading to be performed, writing or typing to be completed, math problems to be solved, material to be reviewed before a test, or other skills to be practiced. 
</div>
<br>
Search Word
<input id='search' type='text'>
<br><br>
<button>SEARCH</button>

突出显示功能：

function highlight_word(selector, word) {
    html = $(selector).html();
    replace = word;
    re = new RegExp(replace,"gi");
    $(selector).html(html.replace(re, "<span class='word'>" + word + "</span>"))
    $('.word').css('color', 'blue');
    num_highlights = $('.word').css('color', 'blue').length;
    return(num_highlights)
    }

报告功能：

function search_and_number() {
    $('.show_num').remove();
    val = $('#search').val();
    num = highlight_word('.my_text', val);
    $('body').append("<a class='show_num'>" + num + " highlighted word/s</a>");
    }

处理按钮：

$('button').click(function() { search_and_number() })

结果：

搜索一个段落

2 个答案: