Получить соответствующий текст из Div

Question

У меня есть следующий div, содержащий определенный текст, который мне нужно сопоставить со значениями, разделенными запятыми:

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

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

Я использую вызов Ajax для сопоставления этих значений со стороны сервера и извлекается следующий формат:

This is para 1, This is para 2

Итак, для одной строки, за исключением разделенных запятыми, я могу сопоставить одну строку и внести изменения в соответствии с этим текстом следующим образом:

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

Но я не уверен, как я могу этого добиться?

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

Это означает, что он должен изменить цвет соответствующего div. Итак, я считаю, что здесь мне нужно сделать какое-то разделение текста, чтобы соответствовать им соответственно, но немного запутано. Мы будем признательны за любой лучший подход или идею - Спасибо.

Answer 1

Я бы реорганизовал то, что отправляет сервер (возможно, действительный JSON?). Тем не менее, чтобы настроить таргетинг на оба .val, вам нужно будет выбрать их индивидуально. В приведенном ниже фрагменте предполагается, что сервер отправит This is para 1, This is para 2 и построит селектор для 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>

Answer 2

Вы можете использовать метод jQuery .filter() вместе с методом массива .includes():

    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>

Однако я бы предпочел использовать .filter() с техникой, которая использует селектор :contains(), так как это будет ближе к вашей цели:

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 3

Еще один вариант, как показано ниже:

// 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>

Обратите внимание, что эта демонстрация (намеренно) освещает одну из проблем с использованием :contains(); выбраны оба Paragraph 1 и Paragraph 10.