search substring through jQuery

Question

My JSP has following div

<td class="detail">Hello my name is Bond
<br/>James Bond
</td>

I have to search whether the class "detail" has sub string "Bond James Bond"

As Bond James bond has "br" in middle, how can I search that whether this string has the substring

I have tried multiple combinations of /n and br in the jQuery to display

alert($('.detail').text().toLocaleLowerCase().indexOf('bond\n james bond'));

and

 alert($('.detail').text().toLocaleLowerCase().indexOf('bond<br> james bond''));

but it always return -1. help me out thanks in advance

I would first put the result of that call to text() in an alert, so you can see what it is that it will return to you... That might help you figure put what you would need to look for. You may need to use \n\r (or is it \r\n?) for a new line - not sure whether \n will be enough... — moilejter, Aug 24 '18 at 07:29

Rory McCrossan · Accepted Answer · 2018-08-24T11:21:26.677

3

You have two issues here. Firstly the response of text() in this case will remove the <br /> tag in the middle of the element (as it is HTML). Secondly, the removal will leave a lot of blank space and a line break. As a result the output of text will be:

hello my name is bond
      james bond

You can use Regex to remove the line breaks and additional spaces before performing the indexOf() check:

var text = $.trim($('.detail').text()).toLocaleLowerCase().replace(/\s+/g, ' ');

console.log(text.indexOf('bond james bond'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="detail">Hello my name is Bond
      <br/>James Bond
    </td>
  </tr>
</table>

edited Aug 24 '18 at 11:21

answered Aug 24 '18 at 07:29

Rory McCrossan

306,214
37
269
303

Hey Rory, it wont work in IE 8. Error coming is " Object doesn't support property or method 'trim' ". – Ayush Aug 24 '18 at 11:07
Yeah, `trim()` isn't supported in < IE9. You could use a regex to do it instead. Although it's not technically needed in this example, it's still good practice to fully sanitise a text input before working on it. – Rory McCrossan Aug 24 '18 at 11:10
will you please give me small demo like you gave for trim – Ayush Aug 24 '18 at 11:11
Check this out: https://stackoverflow.com/questions/2308134/trim-in-javascript-not-working-in-ie – Rory McCrossan Aug 24 '18 at 11:11
the solution here works with .val() but here I am using .text() – Ayush Aug 24 '18 at 11:18
Nothing here or in that question is using `val()`...? – Rory McCrossan Aug 24 '18 at 11:18
the link you told me to refer had all solutions with .val(). I need solution for .text() – Ayush Aug 24 '18 at 11:19
No, use this: https://stackoverflow.com/a/2308157/519413. It works for any string, regardless of its source. – Rory McCrossan Aug 24 '18 at 11:20
1

Alternatively use `$.trim()`. I updated the answer for you – Rory McCrossan Aug 24 '18 at 11:21

score 0 · Answer 2 · answered Aug 24 '18 at 07:28

Use text() to get only the inner text of the td (without any HTML), and then remove all the extra spaces in between.

Then you can simply match it with a Regular Expression created out of your text. See the demo below:

const searchString = 'Bond James Bond';
const regex = new RegExp(searchString);
const text = $('.detail:first').text().replace(/\s+/g, ' ');

console.log(text, '-', regex.test(text));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="detail">Hello my name is Bond
      <br/>James Bond
    </td>
  </tr>
</table>

search substring through jQuery

2 Answers2