Exact search in JavaScript

Question

How I can search text in JavaScript only if it matches perfectly?

For example, I have this structure:

<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>

For example, I want to check if the text item Name exist in the page then if the item Name text exist remove associated children. So for the first item Name I need to remove only the color:

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

Then if item Name Blue text exist I need to remove associated children

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

And if the third item Name Purple text exist then remove associated children:

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

I create this script, but, for example, the name Color is deleted everywhere. Even if in the item Name or in item Name Purple must remain there. I think the problem is because the first product have the name item Name and in the second product the name is start with item Name Purple.

<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>

JonSG · Accepted Answer · 2016-04-16 16:45:13Z

1

I'm not exactly sure what you are asking, but I hope this helps.

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");

answered Apr 16, 2016 at 16:45

JonSG

13.6k2 gold badges32 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Robert Over a year ago

thank you I don;t understand for what is this code, but if you read again my post, there are 3 items: item Name, item Name Blue and item Name Purple, how I can identify this name and if is exist do something

Collectives™ on Stack Overflow

Exact search in JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related