includes function doesn't recognize substring in text variable

Question

I am trying to add a "title" attribute to HTML td elements based on their text.

I have written the following:

$("tr.sel-rtac-first td:first-child").each(function(t,x){
    var hours = "";
    var text = $(x).text();
    switch (text) {
        case (text.includes("מרכזית-מדף פתוח") == true):
            hours = "יהדות 401: א - ה  08:00 - 19:00"
            break;
        default: hours = "text"
    }
    $(x).attr("title",hours);
});

I can see in my tests that the text variable is receiving the correct text:

"
                        Cen.lib-Stacks - מרכזית-מדף פתוח -#Four weeks - ארבעה שבועות#
                    "

The text is in Hebrew, but you can clearly see that the text I am looking for is indeed part of the variable text. Yet it reverts to the default, not recognizing that the text includes that segment.

I also tried without the == ture in the code:

case (text.includes("מרכזית-מדף פתוח")):

But this doesn't work either.

A previous solution I tested was to use the .title() function, but that didn't work either (I suspect because the element doesn't have a title attribute to begin with, I am adding one).

How can I make sure that the includes function recognizes that the substring is indeed in the text?

It looks like you'd want an if {} else {} instead of switch. You're switching based on the text string, and the first case, while it evaluates to true, then says basically does the string text match the boolean true, which it doesn't so it fails. You want something like if(text.includes("מרכזית-מדף פתוח")) { hours = "19:00 - 08:00 ... "; } else { hours = "text"; } — user1189882
– user1189882, Commented Mar 27, 2019 at 16:43
Have you tried it with a plain if else statement, rather than the two case switch statement? — Taplar
– Taplar, Commented Mar 27, 2019 at 16:44

Nino Filiu · Accepted Answer · 2019-03-27 16:51:49Z

1

Use an if statement instead of a switch case as @mark.hch suggested.

Concerning the buggy includes, the issue can't be reproduced with the code you provided:

const haystack = 'Cen.lib-Stacks - מרכזית-מדף פתוח -#Four weeks - ארבעה שבועות#';
const needle = 'מרכזית-מדף פתוח';
console.log(haystack.includes(needle));

The error you're observing is likely to be stemming from elsewhere.

answered Mar 27, 2019 at 16:51

Nino Filiu

19k11 gold badges65 silver badges97 bronze badges

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

2 Comments

Nimrod Yanai Over a year ago

Thank you. I was trying to avoid if else statements, since this is just a test run and the actual code will include A LOT of cases, but it seems there is no choice.

Nimrod Yanai Over a year ago

The if else statements work. I guess there are no easy solutions. Thank you

thibautj · Accepted Answer · 2019-03-27 16:46:04Z

1

It's your use of ´switch´ and ´case´ that is not good.

You can just write:

$("tr.sel-rtac-first td:first-child").each(function(t,x){
 var hours = "";
 var text = $(x).text();

 if (text && text.includes("מרכזית-מדף פתוח")) {
   hours = "יהדות 401: א - ה  08:00 - 19:00";
 } else {
   hours = "text";
 }

 $(x).attr("title",hours);
});

answered Mar 27, 2019 at 16:46

thibautj

766 bronze badges

Comments

zer00ne · Accepted Answer · 2019-03-27 18:19:40Z

The best way to handle this type of search is RegExp with the unicode flag: u:

// RegEx literal syntax for unicode ex. a => U+61 => \u{61}
  /\u{5DE}\u{5E8}\u{5DB}\u{5D6}\u{5D9}\u{5EA}\x2D\u{5DE}\u{5D3}\u{5E3} \u{5E4}\u{5EA}\u{5D5}\u{5D7}/u

When I attempted to highlight certain letters the Stack editor would skip over them. To avoid any incompatibilities derived from different languages unicode is a possible solution. Translation was possible by using the ES2015 Unicode regular expression transpiler.

In addition to the above suggestion -- the jQuery logic needs to be addressed:

When using .each() method and referencing the current element, use $(this)
```
var text = $(this).text() 
```
Methods such as .includes() and .test() (the Regexp method in demo) returns true or false. The less verbose syntax when in a condition is:
```
if (RegExp.test("String")) {...
```
Using == true will yield the same result but in other circumstances it can change type so be careful.

$("tr td:first-child").each(function(){
  var text = $(this).text();
  if (/\u{5DE}\u{5E8}\u{5DB}\u{5D6}\u{5D9}\u{5EA}\x2D\u{5DE}\u{5D3}\u{5E3} \u{5E4}\u{5EA}\u{5D5}\u{5D7}/u.test(text)) {
    $(this).attr("title", "יהדות 401: א - ה  08:00 - 19:00");
  } else {
    $(this).attr('title', text);
  }
});

table {
  table-layout: fixed;
  width: 80vw;
  height: 80vh;
  margin: 5vh auto
}

td {
  width: 33%;
}

table, td {
  border: 1px solid #000
}

td::before {
  content: ' ';
  min-height:20px;
}

<table>
<tr><td>Cen.lib-Stacks - מרכזית-מדף פתוח -#Four weeks - 
ארבעה שבועות#</td><td></td><td></td></tr>
<tr><td>TEST</td><td></td><td></td></tr>
<tr><td>TEST</td><td></td><td></td></tr>
<tr><td>TEST</td><td></td><td></td></tr>
<tr><td>Cen.lib-Stacks - מרכזית-מדף פתוח -#Four weeks - 
ארבעה שבועות#</td><td></td><td></td></tr>
<tr><td>TEST</td><td></td><td></td></tr>
<tr><td>TEST</td><td></td><td></td></tr>
<tr><td>TEST</td><td></td><td></td></tr>
<tr><td>Cen.lib-Stacks - מרכזית-מדף פתוח -#Four weeks - 
ארבעה שבועות#</td><td></td><td></td></tr>
<tr><td>TEST</td><td></td><td></td></tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Collectives™ on Stack Overflow

includes function doesn't recognize substring in text variable

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related