javascript - jquery 查找和替换输入字段正在替换我的所有内容，而不仅仅是个别段落

Question

我有一些段落和一个输入框。基本上，用户在该字段中输入内容，当他们按下“ENTER”时，它会运行 jquery 函数，在下方可以看到。

本质上发生的事情是，当在段落和用户输入之间找到匹配项时，由于缺少更好的短语，该段落的 HTML 被自身替换，但这次是一个 span 环绕匹配的文本，以便 CSS 突出显示它。

这很好，但我遇到的问题是，当文本被替换时，它替换的是页面上该类型的每个 HTML 元素。有点难以用语言表达，所以看看这个 fiddle 的行为。输入一些明显出现在段落中的文本，看看它做了什么。

我怎样才能使文本逐个元素地重新生成，而不是获取世界上的所有内容并重新生成它？

<input type="text" id="searchbox">
<p>Let's get some text to test</p>
<p>This is another paragraph</p>

function searchHighlight(searchText){
    if(searchText){
        // Declare variable for the question content
        var content = $('p').text();

        // Declare variable for the search phrase
        var searchExp = new RegExp(searchText, "ig");

        // Declare a variable for when a match is found
        var matches = content.match(searchExp);

        // If some of the text is found in the QUESTION do the following...
        if(matches){
            $("p").html(content.replace(searchExp, function(match){
                return "<span class='selected'>" + match + "</span>";
        }))
    }
    else{
        $("#searchbox").css("border", "1px solid red")
    }
}

这是一个 fiddle https://jsfiddle.net/awv5r1f0/1/

Answer 1

为了达到预期的结果，使用下面的选项使用每个，找到搜索词并替换那个特定的 p html

问题 $("p").html() 将更新所有 p 标签，即用相同文本替换所有 p 标签

1. 通过循环所有 p 元素进行更新
2. 使用 $(this).html 仅更新具有该匹配词的 p 元素

$("p").each(function() {
    $(this).html($(this).text().replace(searchExp, function(match) {
        return "<span class='selected'>" + match + "</span>";
    }))
})

code sample

$(function() {
    // Create event for enter key in searchbox
    $("#searchbox").on("keydown", function(event) {
        if (event.which == 13) {
            // run function
            searchHighlight($(this).val())
        }
    })
})

function searchHighlight(searchText) {
    if (searchText) {
        // Declare variable for the question content
        var content = $('p').text();

        // Declare variable for the search phrase
        var searchExp = new RegExp(searchText, "ig");

        // Declare a variable for when a match is found
        var matches = content.match(searchExp);

        // If some of the text is found in the QUESTION do the following...
        if (matches) {
            $("p").each(function() {
                $(this).html($(this).text().replace(searchExp, function(match) {
                    return "<span class='selected'>" + match + "</span>";
                }))
            })
        } else {
            $("#searchbox").css("border", "1px solid red")
        }
    }
}

.selected{
  background: yellow;
  font-weight: 700;
}
#searchbox{
  border: 1px solid #ccc;
  outline: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="searchbox">
<p>Let's get some text to test</p>
<p>This is another paragraph</p>