Как удалить двойной текст в элементе с помощью jquery?

Question

Можете ли вы удалить двойной текст с помощью jQuery? У меня есть следующие настройки:

<td class="product-name">Instagram workshop - Instagram workshop</td>
    <td class="product-name">Product 4 - Product 4</td>

Может ли jQuery удалить '- Мастерская в Instagram', чтобы я получил следующий вывод:

<td class="product-name">Instagram workshop</td>
<td class="product-name">Product 4</td>

Answer 1

Простым решением было бы использовать регулярное выражение:

([^\-]+)\s*\-\s*\1

Здесь вы захватываете группу (в скобках), а затем используете ссылку обратного вызова для сравнения слов.Вы можете использовать это для поиска и замены контента на $1 - первая группа без каких-либо символов между

Answer 2

Вы можете получить все элементы с классом product-name и перебрать их, используя .each().Используя .each(), вы можете получить доступ к текущему элементу, с которым вы работали, используя $(this).Это даст вам возможность выполнять методы jquery, поскольку вы сделали this объектом jquery.

Поскольку вы хотите изменить текст каждого из ваших td элементов, вы можете сделать это с помощью .text().text() позволяет вам передать в функцию, которую вы затем можете return результат нового текста, который вы хотели бы видеть в вашем элементе.В приведенном ниже примере я использовал Set с .split() для создания контейнера уникальных слов (разделенных -).Разложив набор обратно в массив с использованием синтаксиса расширения (...), вы можете затем объединить все элементы массива (т.е. слова) обратно в большую строку, которая больше не будет содержать ваши дублирующиеся слова.

Смотрите пример ниже:

$(".product-name").each(function() {
  $(this).text(function(_, txt) {
    return [...new Set(txt.split(' - '))].join(' - ');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td class="product-name">Instagram workshop - Instagram workshop</td>
    <td class="product-name">Product 4 - Product 4</td>
    <td class="product-name">Product 1 - Product 2 - Product 2</td>
  </tr>
</table>