jQuery - Поиск и замена текста

#jquery #text #replace #find

Вопрос:

Я пытаюсь заменить только текст «Номер продукта/Описание» на «Номер продукта». Вот строка кода:

 <td><input type="checkbox" name="dessearch">amp;nbsp;Product Number/Description</td>

Я попытался сделать следующее, но это также удаляет входные данные:

 $("#ordersearch-page #content table tr td").text(function () {
    return $(this).text().replace("Product Number/Description", "test"); 
});

Любая помощь будет очень признательна!

Ответ №1:

Один из вариантов-заменить HTML, а не текст. Это сохранит <input> элемент.

 $("#ordersearch-page #content table tr td").html(function(i, oldhtml) {
  return oldhtml.replace("Product Number/Description", "test");
});

Однако при этом также будут потеряны любые динамические изменения <input> элемента, такие как введенное пользователем значение или прослушиватели событий.

Другой вариант-поместить текст во вложенный элемент, чтобы вы могли специально его настроить.

 $("#ordersearch-page #content table tr td span").text(function(i, oldtext) {
  return oldtext.replace("Product Number/Description", "test");
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ordersearch-page">
  <div id="content">
    <table>
      <tr>
        <td><input type="checkbox " name="dessearch "><span>amp;nbsp;Product Number/Description</span></td>
      </tr>
    </table>
  </div>
</div>

1. Первый вариант сработал как нельзя лучше! К сожалению, я не могу редактировать html непосредственно на этой странице, так что это отлично работает. Ваш второй вариант привел к хорошей альтернативе — созданию вложенного элемента с помощью jQuery (например, обертывание в промежуток), а затем нацеливание/замена того, что находится в промежутке, вместо этого.

Ответ №2:

Для достижения этой цели вы можете использовать contents() метод для извлечения определенного текстового узла и обновления его nodeValue , например:

 $("table tr td").each((i, el) => {
  let node = $(el).contents().filter((i, n) => n.nodeType === Node.TEXT_NODE amp;amp; n.nodeValue.trim() !== '')[0];
  node.nodeValue = node.nodeValue.replace("Product Number/Description", "test");
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="checkbox" name="dessearch">amp;nbsp;Foo</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="dessearch">amp;nbsp;Product Number/Description</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="dessearch">amp;nbsp;Bar</td>
  </tr>
</table>