gpt4 book ai didi

javascript - 搜索单词并使用 jquery 突出显示

转载 作者:搜寻专家 更新时间:2023-10-31 08:10:10 28 4
gpt4 key购买 nike

我用 jQuery 编写了一个提供搜索功能的 javaScript 文件。我也在想办法突出这个词。下面是代码。

过滤器.js:

(function ($) {
// custom css expression for a case-insensitive contains()
jQuery.expr[":"].Contains = jQuery.expr.createPseudo(function(arg) {
return function( elem ) {
return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});


function listFilter(header, list, title) {
// header is any element, list is an unordered list, title is any element
// create and add the filter form to the header
// create a button for collapse/expand to the title

var form = $("<form>").attr({"class":"filterform","action":"#"}),
button = $("<input>").attr({"class":"rest", "type":"submit", "value":"Collapse All", "id":"switch"}),
input = $("<input>").attr({"class":"filterinput","type":"text", "placeholder":"Search"});

$(form).append(input).appendTo(header); //add form to header
$(title).append(button); //add button to title

//on click function for collapse/expand all
$("#switch").click(function(){
if($(this).val() == "Collapse All"){
$(".filterinput").val("");
$(this).val("Expand All");
$("div.content div.markdown").parent().parentsUntil(list).hide();
$(list).find("span.path").parentsUntil(list).show();
$(list).find("ul.endpoints").css("display", "none");
}
else{
$(".filterinput").val("");
$(this).val("Collapse All");
$("div.content div.markdown").parent().parentsUntil(list).hide();
$(list).find("span.path").parentsUntil(list).show();
}
});

$(input)
.change( function () {
var filter = $(this).val();
if(filter) {
// this finds a single string literal in div.markdown,
// and hides the ones not containing the input while showing the ones that do
$(list).find("div.content div.markdown:not(:Contains(" + filter + "))").parent().parentsUntil(list).hide();
$(list).find("div.content div.markdown:Contains(" + filter + ")").parent().parentsUntil(list).show();
}
else {
$("div.content div.markdown").parent().parentsUntil(list).hide();
$(list).find("span.path").parentsUntil(list).show();
$(list).find("ul.endpoints").css("display", "none");
}
return false;
})
.keyup( function () {
// fire the above change event after every letter
$(this).change();
});
}
//ondomready
setTimeout(function () {
listFilter($("#header"), $("#resources"), $("#api_info"));
}, 250);
}(jQuery));

我想操作的 html 是由另一个 JS 文件动态创建的,所以我需要在 DOM 完全呈现后操作它。我将关注的 html 呈现如下,特别是单词在 (div class="markdown") 中。

索引.html:

<div class="content" id="connectivitypacks_get_connectivitypacks_content">
<h4>Description</h4>
<div class="markdown"><p>Response will return details for the connectivity packs based on the ID.</p>
<h2 id="keywords">Keywords</h2>
<p> foo, bar, helloWorld, java</p>
</div>
</div>

最佳答案

这是一个使用您的 markdown 的示例。

  1. 用您要搜索的词创建一个正则表达式。
  2. 获取您的 .markdown 的 html
  3. 将单词替换为 <span class="marker">"+ word +"</span> .因此,这会在您搜索的词周围创建一个 span 标签。
  4. 根据需要创建 CSS 样式。

function highlight(word) {
var element = $('.markdown');
var rgxp = new RegExp(word, 'g');
var repl = '<span class="marker">' + word + '</span>';
element.html(element.html().replace(word, repl));

}

highlight('details');
.marker {
background-color: yellow;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content" id="connectivitypacks_get_connectivitypacks_content">
<h4>Description</h4>
<div class="markdown">
<p>Response will return details for the connectivity packs based on the ID.</p>
<h2 id="keywords">Keywords</h2>
<p>foo, bar, helloWorld, java</p>
</div>
</div>

关于javascript - 搜索单词并使用 jquery 突出显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31592132/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com