我正在尝试使用jQuery构建“简单”突出显示功能。 由于某种原因,这使我的HTML重复了,我不确定为什么。 我要做的就是在搜索栏中键入搜索文本,并在键入时突出显示标签中的文本。

有什么想法吗? 绝望...

这是HTML和JS

 function hiLite(searchWords) { if (searchWords) { var content = $("p").text(); var regExp = new RegExp(searchWords, "ig"); var matches = content.match(regExp); if (matches) { $("p").html(content.replace(regExp, function(match) { return "<span class='highlight'>" + match + "</span>"; })); } else { $(".highlight").removeClass("highlight"); } } else { $(".highlight").removeClass("highlight"); } }; $("#searchBar").keyup(function() { var userInput = $(this).val().toLowerCase(); hiLite(userInput); }); 
 <!doctype html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="photo_filter.css" type="text/css"> </head> <body> <div class="search">Search: <input type="text" id="searchBar"> </div> <div id="results"> <p>some text is here</p> <p>other kinds</p> <p>even more</p> </div> </body> </html> 

#1楼 票数:0

最大的问题是,当您确实需要分别评估每个<p>标签时,您一次选择了所有<p>标签。

如果我有3个<p>标记,并且这样做: $('p').html('I am ap tag!!'); -然后每个<p>标签都会受到影响。

同样,如果我这样做: var content = $('p').text(); -然后, content等于"some text is hereother kindseven more" ,即每个 <p>标记中的文本。 这不好!

尝试这个:

function hiLite(searchWords) {
    if (searchWords) {
        $('p').each(function(index, single_p) {
            var text = $(single_p).text(); // .text() does not include html, does not include any former <spans>
            $(single_p).html(text); // reset <p> html to be only the text from previous line
            var regExp = new RegExp(searchWords, "ig");

            var new_text = text.replace(regExp, '<span class="highlight">' + searchWords + '</span>'); // create new text with HTML highlight
            $(single_p).html(new_text); // update DOM with our new HTML
        });
    }
};


$("#searchBar").keyup(function() {
    var userInput = $(this).val().toLowerCase();
    hiLite(userInput);
});

#2楼 票数:0

解决方案2:

添加了条件以根据搜索文本突出显示文本

JS代码:

 function hiLite(searchWords){

        if(searchWords){
        var content = $("p").text();
        var regExp = new RegExp(searchWords, "ig");
        var matches = content.match(regExp);

       if(matches){
                        $('#results p').each(function() {
                        var test = '<span class="highlight">'+searchWords+'</span>';
                        var text = $(this).text();
                        $(this).html(text.replace(regExp, test)); 
                    });
            }

        } 
    };


$("#searchBar").keyup(function(){
 var userInput = $(this).val().toLowerCase();
 hiLite(userInput); 
});

HTML代码:

<div class="search">Search:     
<input type="text" id="searchBar">    
</div>

<div id="results">

    <p>some text is here</p>
    <p>other kinds</p>
    <p>even more</p>

</div>

CSS:

.highlight{
  color:red
}

JSFiddle

  ask by Jon translate from so

未解决问题?本站智能推荐:

1回复

Javascript和jQuery,如果功能不起作用

帮我! 我有这种代码,但它从未使用过IF函数吗? 怎么了? jQuery的工作,但警报杀死IF功能? 如果没有jquery,功能是否正常工作。 更新 您好,这里是正确的代码,但我更改了URL地址。 当我放}); 在if / else功能之外,它仍然不起作用。 它将使“ k
1回复

使用jQuery后JavaScript功能不起作用

我正在使用此jquery对textarea进行拼写检查。 拼写检查工作正常,但在使用jquery进行拼写检查后,我的其他javascript函数却无法正常工作。 知道为什么吗?
3回复

jQuery的每个功能不起作用

我有以下我通过PHP传递的json数组。 PHP数组是- 我正在尝试像这样迭代JavaScript中的php数组- 如果我打印数据的控制台,它会显示给我,但是在循环中无法正常工作。 但是在控制台中,它给了我undefined 。 我想要在数组中获得的值。
5回复

jQuery单击功能不起作用

我正在尝试让我的代码单击并显示警报,但是该代码似乎无法正常工作。 我在这里编写了代码: https://jsfiddle.net/MGames/9eu94Lau/1/ 这是我的html: 这是单击后不显示警报的代码 我将不胜感激,帮助我找出我做错了什么。 谢谢。 编辑:由
1回复

jQuery单击功能不起作用

jQuery单击功能无法正常工作。 确实可以,但是我要在页面加载后通过JavaScript调用加载HTML,在这种情况下jQuery click函数无法正常工作。 HTML部分: JavaScript: 提前致谢。
3回复

jquery点击功能不起作用

我有一个用VS 2013编写的asp.net Web应用程序。该应用程序有嵌套的母版页,主母版页有以下代码: 我的网络表单还包含以下代码: 当我构建项目并在浏览器上运行时(无论是ie还是chrome),我点击“textbox1”,浏览器什么都不做。 感谢您的帮助。
1回复

jQuery的提交功能不起作用

我正在开发一个网页,该网页可以动态创建带有各种选择标签的表单。 令人难以置信的是,jQuery提交功能将错误的信息传递给必须处理该信息的php文件(form_submit.php); (netbeans 7.4)调试器始终在php文件的$ _POST中显示默认值(未选择),而不是选择值。
1回复

jQuery触发功能不起作用

我一直在尝试使用jQuery触发文本字段的enter-button-pressed事件,我的代码发布在下面,但它没有触发必填字段上的enter-button-pressed事件。 请说明可能是什么问题? 码: