在javascript中进行精确搜索

Exacly search in javascript

本文关键字：搜索 javascript      更新时间：2023-09-26

如何仅在完全匹配的情况下才能在javascript中搜索文本。例如，我有这样的结构：

<ul class="item-options">
    <li>First Item</li>
    <li>item Name</li>
    <li>product 1</li>
    <li>Item Description</li>
    <li>product description</li>
    <li>Additional Info</li>
    <li>Red</li>
    <li>Color</li>
    <li>Red</li>
</ul>
<ul class="item-options">
    <li>Second Item</li>
    <li>item Name Blue</li>
    <li>product 2</li>
    <li>Item Description</li>
    <li>product2 description</li>
    <li>Additional Info</li>
    <li>-----</li>
    <li>Color</li>
    <li>Blue</li>
</ul>
<ul class="item-options">
    <li>Third Item</li>
    <li>item Name Purple</li>
    <li>product 3</li>
    <li>Item Description</li>
    <li>-------</li>
    <li>Additional Info</li>
    <li>-----</li>
    <li>Color</li>
    <li>------</li>
</ul>

例如，我想检查页面中是否存在项目名称文本，然后如果存在>项目名称文本则删除相关联的子项。因此，对于第一个项目名称，我只需要删除颜色：

<li>Color</li>
<li>Red</li>

然后，如果存在项目名称蓝色文本，我需要删除关联的子

<li>Additional Info</li>
<li>-----</li>

如果存在第三个项目名称紫色文本，则删除相关的子项：

<li>Item Description</li>
<li>-------</li>
<li>Additional Info</li>
<li>-----</li>
<li>Color</li>
<li>------</li>

我创建了这个脚本，但例如，名称Color在所有地方都被删除了。即使在物品名称或项目名称中，紫色也必须保留在那里。我认为问题是因为第一个产品的名称为项目名称，而在第二个产品中，名称以项目名称紫色开头。

<script type="text/javascript">
    jQuery(document).ready(function() {
         if (jQuery('.items-class li:contains("item Name")').length > 0)
          { 
           var parent = jQuery('.items-class');
           var children = jQuery('.items-class').find("li");
           jQuery(children).each(function(i,e){
            if(~jQuery(e).text().indexOf("item Name Blue")){
                jQuery(parent).find('li:contains("Additional Info")').html('');  
                jQuery(parent).find('li:contains("-----")').html('');
            }
             if(~jQuery(e).text().indexOf("item Name Purple")){
                jQuery(parent).find('li:contains("Item Description")').html('');  
                jQuery(parent).find('li:contains("-------")').html('');
                jQuery(parent).find('li:contains("Additional Info")').html('');  
                jQuery(parent).find('li:contains("-----")').html('');
                jQuery(parent).find('li:contains("Color")').html('');  
                jQuery(parent).find('li:contains("-----")').html('');
            }
           else if(~jQuery(e).text().indexOf("item Name")){
                jQuery(parent).find('li:contains("Color")').html('');  
                jQuery(parent).find('li:contains("Red")').html('');
            }
          });
         }   
    });
</script>

我不太确定你在问什么，但我希望这能有所帮助。

function removeAdditionalInfo(searchCriteria){
    var interestingTagSelector = "ul.item-options > li";
    var additionInfoHeader = "Additional Info";
    var getFilter = function(criteria){
        return function(index, item){ return (item.innerHTML === criteria); };
    };
    // find the potentially interesting li tags
    $(interestingTagSelector)
        // filter out those that are not in fact interesting
        .filter(getFilter(searchCriteria))
        // get siblings following an interesting li tag
        .nextAll()
        // ignore those not starting the additional info section
        .filter(getFilter(additionInfoHeader))
        // get siblings following the AddInfo header
        .nextAll()
        // removed them
        .remove();
}
removeAdditionalInfo("item Name");

下面的removeAdditionalInfo（）函数和：

removeAdditionalInfo("item Name");
removeAdditionalInfo("item Name Blue");
removeAdditionalInfo("item Name Purple");

将删除其他信息项。

相关文章：