How to compare two strings regardless of their capitalization?

Question

I have:

mytext = jQuery('#usp-title').val();

then I do

if(jQuery("#datafetch h2 a").text() == mytext) {

But one title could be:

Space Mission just as well as space mission

I cannot standardise the text format for other reasons therefore I am really looking at comparing two strings regardless of their capitalisation.

UPDATE

The thing is that I am using the input field as a search so the user could type space mission while the post title would be Space mission so the search result wouldn't be exact and i need the exact phrase instead.

Complete code:

<div id="datafetch"></div>

function fetch(){
  jQuery('#datafetch').empty();
  mytext = jQuery('#usp-title').val();
    jQuery.ajax({
        url: '<?php echo admin_url('admin-ajax.php'); ?>',
        type: 'post',
        data: { action: 'data_fetch', exactwords:  mytext },
        success: function(data) {
            jQuery('#datafetch').html( data );
        if(jQuery("#datafetch h2 a").text().toLowerCase().trim() == mytext.toLowerCase().trim()) {
            jQuery("#componi").attr("disabled", "disabled").hide();
        } else {
                jQuery("#componi").removeAttr("disabled", "disabled").show();
        }
            if(jQuery("#datafetch h2 a").text() != mytext) {
            jQuery("#fatto").hide();
            jQuery('#datafetch').empty();
        }
        }
    });

}

It's trickier actually because the search is coming from the text input, so it's about the query of the ajax i believe more than capitalisation, just a thought. The latest code above gives no results by typing:

space mission while the post title is Space mission

UPDATE 2

Post article title:

Space Mission

User searches for

space mission

Console.log(data) gives correct result

   <ul class="list-unstyled margin-top-80">
       <li>
            <h2><a target="_blank" href="example.com"">Space Mission</a></h2>
       </li>
   </ul>

Yet this doesn't happens:

jQuery('#datafetch').html( data );

if I insert the right words Space Mission does tho

Possible duplicate of [JavaScript: case-insensitive search](http://stackoverflow.com/questions/177719/javascript-case-insensitive-search) — Tarik, Apr 09 '17 at 08:45
it looks more like a ajax question, than a string problem. does it work with the exact input and search? — Nina Scholz, Apr 09 '17 at 08:53
yes exactly what I thought, it does work indeed with the exact words... — rob.m, Apr 09 '17 at 08:53
@rob.m can you share what exact `data` comes back as ajax response? — gurvinder372, Apr 09 '17 at 08:55
you just completely changed the whole context of the question. Is there possibility for more than one `` in the response that needs to be checked also? — charlietfl, Apr 09 '17 at 08:57
@gurvinder372 i just checked the console.log for data and it is actually getting the correct data so it is a comparison problem still — rob.m, Apr 09 '17 at 08:57
@charlietfl see above comment. Also it is done server side because it's a wizard and I don't want people to create articles with the same title, so i am doing a check first — rob.m, Apr 09 '17 at 08:58
@rob.m can you update your question to post what exact `data` comes back, and what exactly has been entered by user? — gurvinder372, Apr 09 '17 at 08:58
last comment doesn't make a lot of sense in the context of checking this html that is sent from server where you already know if there is a match or not — charlietfl, Apr 09 '17 at 09:00
@charlietfl see if the updated question helps you and forget about the server side for now. — rob.m, Apr 09 '17 at 09:02
`jQuery('#datafetch').html( data );` is not dependent on anything the way question code is shown....other then the response data and a matching selector element. Symptom of `doesn't happen` doesn't make sense unless `jQuery('#datafetch')` doesn't exist — charlietfl, Apr 09 '17 at 09:07
@charlietfl what do you mean sorry? data will have to be placed into — rob.m, Apr 09 '17 at 09:10
right but your update says it doesn't get inserted if query doesn't match but there is no dependency for inserting the html. This is turning into an XY Problem — charlietfl, Apr 09 '17 at 09:10
@charlietfl and it doesn't. I can see it only in console.log(data) for some reasons but it doesn't get appended — rob.m, Apr 09 '17 at 09:12
well the way the code is shown there is nothing preventing it being inserted and problem is eleshwere or code shown is not what is being used — charlietfl, Apr 09 '17 at 09:13
Then create a demo that reproduces this problem. Can do ajax in many of the sandbox sites like plunker, jsfiddle etc — charlietfl, Apr 09 '17 at 09:14
@charlietfl ok the issue is with the else if, if you see above i am doing first else and the a separate if. SO it is kinda wrong the code above. however while adjusting it on here, i noticed that this is never happens if(jQuery("#datafetch h2 a").text() != mytext) { — rob.m, Apr 09 '17 at 09:25
@gurvinder372 accepted yours as it was correct but check my own answer — rob.m, Apr 09 '17 at 09:55
@charlietfl the comparison was still needed and the accepted answer is correct but check my own answer for the final solution — rob.m, Apr 09 '17 at 09:56
doesn't explain *"Yet this doesn't happens:"* part of question though which implies that the html doesn't get inserted at all when the terms don't match. That statement is misleading — charlietfl, Apr 09 '17 at 10:03

gurvinder372 · Answer 1 · 2017-04-09T08:46:24.810

8

Covert both toLowercase()

"Space Mission".toLowerCase() == "space mission".toLowerCase()

In context of your question

if(jQuery("#datafetch h2 a").text().toLowerCase() == mytext.toLowerCase()) {

Trimming in case user enters trailing or leading space, as suggested by @charlietfl

if(jQuery("#datafetch h2 a").text().trim().toLowerCase() == mytext.trim().toLowerCase()) {

edited Apr 09 '17 at 08:46

answered Apr 09 '17 at 08:36

gurvinder372

66,980
10
72
94

this is ok, was trying it, thanks. I have update the question, my fault as i wasn't too clear about. – rob.m Apr 09 '17 at 08:40
might also want to trim them for safety – charlietfl Apr 09 '17 at 08:43
yeah but then you will search for a title like spacemission and there isn't any title like that – rob.m Apr 09 '17 at 08:45
@rob.m trimming only removes whitespace on the ends, not between characters – charlietfl Apr 09 '17 at 08:46
@rob.m user may not enter `spacemission` but can enter `" space mission "`, so provisioning for leading and trailing spaces. – gurvinder372 Apr 09 '17 at 08:47
1

also could be whitespace in html, not just user input – charlietfl Apr 09 '17 at 08:53
this answer does not match the question. – Nina Scholz Apr 09 '17 at 09:11
@NinaScholz I am not sure about that. Based on the `data` OP has shared, this could be the only thing OP could be missing to make it work. – gurvinder372 Apr 09 '17 at 09:14
it does not match, because the question is disputed. as long as the question is unclear, **any** answers are just tries and not answers. – Nina Scholz Apr 09 '17 at 09:17
@NinaScholz I think it does. I started having my own doubts when OP and you made some comments which was more around AJAX rather than string match. But the doubt got cleared when OP shared the `data` which made it clear that this could be the only thing OP is missing, unless there are some things which OP hasn't shared. Let's agree to disagree on `as long as the question is unclear, any answers are just tries and not answers` – gurvinder372 Apr 09 '17 at 09:20
@NinaScholz see my own answer – rob.m Apr 09 '17 at 09:54
@gurvinder372 thanks a lot, the issue was somewhere else yet your answer helped and it is correct. – rob.m Apr 09 '17 at 09:56
@rob.m I am not sure why `setTimeout` is required since `.html` method is not asynchronous – gurvinder372 Apr 09 '17 at 09:57
@gurvinder372 seriously, at this point i don't know anymore. If I don't do that it won't work thats' for sure – rob.m Apr 09 '17 at 09:58
@gurvinder372 guess what, using promise and done was even better jQuery("#datafetch").html(data).promise().done(function(){ - updated my answer too – rob.m Apr 09 '17 at 10:08

score 1 · Answer 2 · answered Apr 09 '17 at 08:47

Get the input result using jquery

var string = jQuery("#datafetch h2 a").text()

and then you can try any of the following -

Simple string comparison : converting both to same case :

string.toUpperCase() === "String".toUpperCase()

If you are fine with regex(notice the i option in regex) :

var otherString = /String/i
otherString.test(string)

There is "match" as well :

string.match(/STRING/i)

match returns null value when no match found

rob.m · Accepted Answer · 2017-04-10T02:09:16.987

The accepted answer is correct and it does answer my original question, and that's why I accepted it. However, the issue was solved by using a setTimeout(function() as there was a little delay between the data populating the div and the check for the 2 value comparisons.

function fetch(){
        jQuery.ajax({
            url: '<?php echo admin_url('admin-ajax.php'); ?>',
            type: 'post',
            data: { action: 'data_fetch', exactwords:  jQuery('#usp-title').val() },
            success: function(data) {
                    jQuery("#datafetch").html(data);
                    setTimeout(function() {
                        var text1 = jQuery("#datafetch").find("h2").find("a").html();
                        var text1B = text1.toLowerCase();
                        var text2 = jQuery('#usp-title').val();
                        var text2B = text2.toLowerCase();
                        if(text1B == text2B) {
                            jQuery("#componi").attr("disabled", "disabled").hide();
                        } else {
                            jQuery("#componi").removeAttr("disabled", "disabled").show();
                            jQuery("#fatto").hide();
                            jQuery('#datafetch').empty();
                        }
                    }, 1000);
            }
        });
}

UPDATE

Using .promise().done() was better

function fetch(){
    var text1;
    var text1B;
    var text2;
    var text2B;
        jQuery.ajax({
            url: '<?php echo admin_url('admin-ajax.php'); ?>',
            type: 'post',
            data: { action: 'data_fetch', exactwords:  jQuery('#usp-title').val() },
            success: function(data) {
                    jQuery("#datafetch").html(data).promise().done(function(){
                        text1 = jQuery("#datafetch").find("h2").find("a").html();
                        text1B = text1.toLowerCase();
                        text2 = jQuery('#usp-title').val();
                        text2B = text2.toLowerCase();
                        if (text1B != text2B) {
                            jQuery("#componi").removeAttr("disabled", "disabled").show();
                            jQuery("#fatto").hide();
                            jQuery('#datafetch').empty();
                        } else if (text1B == text2B) {
                            jQuery("#componi").attr("disabled", "disabled").hide();
                        }
                    });
            }
        });
}

UPDATE TWO

This is what I finally used

function fetch(){
  jQuery.ajax({
    url: '<?php echo admin_url('admin-ajax.php'); ?>',
    type: 'post',
    data: { action: 'data_fetch', exactwords:  jQuery('#usp-title').val() },
    success: function(data) {
      var text2;
      var text2B;
      text2 = jQuery('#usp-title').val();
      text2B = text2.toLowerCase();
      jQuery("#datafetch").html(data).promise().done(function(){
        jQuery("#datafetch ul li h2 a").each(function() {
          var $this = jQuery(this);
          if ($this.text().toLowerCase() !== text2B) {
            $this.parent().parent().hide();
          } else if (text1B == text2B) {
            jQuery("#componi").attr("disabled", "disabled").hide();
          }
        });
      });
    }
  });
}

no need for setTimeout if you just wrap the response in `$()` and work inside that — charlietfl, Apr 09 '17 at 10:08
@charlietfl i resolved it by using .promise().done and i have updated this answer — rob.m, Apr 09 '17 at 10:10

brk · Answer 4 · 2017-04-09T08:51:39.143

0

You can do like this

"Space Mission".replace(/\s+/g, "").toLowerCase() == "space    mission".replace(/\s+/g, "").toLowerCase()

The left hand side will be equal to spacemission same as the expression on the right sade

It will first remove any white space even in between words & will convert to lower case. Removing white space is necessary because space mission is not same as space mission

edited Apr 09 '17 at 08:51

answered Apr 09 '17 at 08:43

brk

48,835
10
56
78

yeah but then you will search for a title like spacemission and there isn't any title like that – rob.m Apr 09 '17 at 08:44

score 0 · Answer 5 · answered Apr 09 '17 at 08:43

0

You will require to convert both strings to lowercase or uppercase and then do the comparison.

    var mytext = jQuery('#usp-title').val();
    if(jQuery("#datafetch h2 a").text().toLowerCase() == mytext.toLowerCase()) 
    {

    }

answered Apr 09 '17 at 08:43

Anup George

16
1

score 0 · Answer 6 · answered Apr 09 '17 at 08:44

0

Convert both strings to upper or lower case

answered Apr 09 '17 at 08:44

Adam Katav

328
3
13

How to compare two strings regardless of their capitalization?

6 Answers6