Get Matching Text From Div

Question

I've the following div that contains certain text which I need to match with comma-separated values:

<div class="val">
    This is para 1
</div>

<div class="val">
    This is para 2
</div>

I am using Ajax call to match those values from server-side and have the following format that are retrieved:

This is para 1, This is para 2

So for one string except the comma-separated, I can match a single string and make changes according to that text as follows:

$( ".val:contains('This is para 1')" ).css( "color", "green" );

But I am not sure how can I achieve this?

$( ".val:contains('This is para 1, This is para 2')" ).css( "color", "green" );

That means it should make color changing to the corresponding div. So I believe, there I require to do some kind of splitting the text to match them accordingly but bit confused. Any better approach or idea would be appreciated - Thanks.

Answer 1

You can use the jQuery .filter() method together with the array .includes() method:

    let str = 'This is para 1, This is para 2,This is para c';
    $(".val").filter(function() { 
        return str.split(/, |,/).includes( this.textContent.trim() ); 
    })
    .css( "color", "green" );

let str = 'This is para 1, This is para 2,This is para c';
    $(".val").filter(function() { 
        return str.split(/, |,/).includes( this.textContent.trim() ); 
    })
    .css( "color", "green" );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="val">
    This is para 1
</div>

<div class="val">
    This is para a
</div>
<div class="val">
    This is para b
</div>

<div class="val">
    This is para 2
</div>
<div class="val">
    This is para c
</div>

<div class="val">
    This is para d
</div>

However, I would favor using .filter() with a technique that uses :contains() selector as that would be closer to your goal:

let str = 'This is para 1, This is para 2,This is para c';
$(".val").filter(function() { 
    return str.split(/, |,/).some(s => $(this).is(':contains(' + s + ')')); 
})
.css( "color", "green" );

    let str = 'This is para 1, This is para 2,This is para c';
    $(".val").filter(function() { 
        return str.split(/, |,/).some(s => $(this).is(':contains(' + s + ')')); 
    })
    .css( "color", "green" );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="val">
    This is para 1
</div>

<div class="val">
    This is para a
</div>
<div class="val">
    This is para b
</div>

<div class="val">
    This is para 2
</div>
<div class="val">
    This is para c
</div>

<div class="val">
    This is para d
</div>

Answer 2

One further option is as below:

// get, and cache, the server response:
let needles = 'Paragraph 2, Paragraph 8, Paragraph 1',

// split that string on the comma character, using
// String.prototype.split(); and then iterate over
// the resulting Array using Array.prototype.map()
// to trim the Array of strings of their leading or
// trailing white-space using String.prototype.trim():
    needlesArray = needles.split(',').map((n) => n.trim());

// here we iterate over the needlesArray, using
// Array.prototype.forEach():
needlesArray.forEach(

  // this is an Arrow function expression in which the 'str'
  // (the first argument) is a reference to the current
  // Array-element value; we concatenate that into the
  // selector String to retrieve the relevant elements, and
  // then use jQuery's addClass() method to add the 'matched'
  // class-name to the element(s):
  (str) => $('div:contains(' + str + ')').addClass('matched')
);

let needles = 'Paragraph 2, Paragraph 8, Paragraph 1',
  needlesArray = needles.split(',').map((n) => n.trim());

needlesArray.forEach(
  (str) => $('div:contains(' + str + ')').addClass('matched')
);

*,
 ::before,
 ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.matched {
  background: linear-gradient(to right, limegreen, #fff6);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Paragraph 1</div>
<div>Paragraph 2</div>
<div>Paragraph 3</div>
<div>Paragraph 4</div>
<div>Paragraph 5</div>
<div>Paragraph 6</div>
<div>Paragraph 7</div>
<div>Paragraph 8</div>
<div>Paragraph 9</div>
<div>Paragraph 10</div>

Note that this demonstration (deliberately) illuminates one of the issues with using :contains(); both Paragraph 1 and Paragraph 10 are selected.

Answer 3

I would refactor what the server sends (perhaps a valid JSON?). Nonetheless, to target both .val you would need to select them individually. The snippet below assumes that the server will send This is para 1, This is para 2 and builds the selector for jQuery

const res = `This is para 1, This is para 2`;

const selector = res.split(',').map(s => `.val:contains('${s.trim()}')`).join(', ');

console.log(selector);

$(selector).css( "color", "green" );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="val">
    This is para 1
</div>

<div class="val">
    This is para 2
</div>