CODEWITHSUNDEEP
javascriptjqueryhtml
Nimrod Yanai
Nimrod Yanai

Reputation: 819

includes function doesn't recognize substring in text variable

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?

Upvotes: 0

Views: 60

Answers (3)

zer00ne
zer00ne

Reputation: 44118

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>

Upvotes: 1

Nino Filiu
Nino Filiu

Reputation: 18561

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.

Upvotes: 1

thibautj
thibautj

Reputation: 76

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

Upvotes: 1

Related Questions