Работа с HTML, текстом и атрибутом value в jQuery

В jQuery имеются три метода, которые позволяют напрямую работать с контентом элемента:

• html – для чтения и изменения HTML содержимого элемента;
• text – для чтения и изменения текстового содержимого элемента;
• val – для чтения и изменения значения элементов формы.

Чтение HTML контента элемента

Например, получим HTML содержимое элемента с идентификатором ( id ) contact :

// сохраним HTML контент элемента в переменную contactHTML var contactHTML = $('#contact').html();

Если выборка содержит несколько элементов, то данный метод вернёт HTML контент только первого элемента:

Содержимое 1.
 
Содержимое 2.
 .  

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

$('p').each(function(){ // выведем содержимое текущего элемента в консоль console.log($(this).html()); });

Изменение HTML контента элемента

Например, заменим содержимое элемента ul :

Если на странице будет несколько элементов ul , то данный метод заменит содержимое каждого из них.

Если необходимо изменить контент только у одного элемента на странице, то наиболее просто это сделать через id .

Использование функции для замены HTML контента элемента:

Название 1.
 
Название 2.
 
Название 3.
 .  

Например, изменим контент элементов (зачеркнём старый контент и добавим рядом новый):

75
 
37
 
64
 
17
 
53
 .  

Получение текстового содержимого элемента

В jQuery получение содержимого элемента в виде обычного текста осуществляется с помощью метода text . При этом все HTML теги, если они присутствуют в контенте, будут вырезаны.

Например, получим текстовое содержимое элемента p и выведем его в контент другого элемента:

 Получить текстовый контент элемента p 
Этот параграф содержит ссылку.
 .  

Метод text также как и html возвращает содержимое только первого элемента выборки (если в ней присутствуют несколько элементов).

Замена контента элемента указанным текстом

Метод text может использоваться не только для чтения, но и для изменения содержимого указанного элемента. При этом HTML теги (если они присутствуют в тексте) будут закодированы с помощью спецсимволов.

 
Некоторый контент.
 .  

После выполнения, элемент div с классом info будет иметь следующий HTML код:

На экране данный элемент будет выглядеть так:

Если в выборке присутствует несколько элементов, то метод text заменит содержимое каждого из них:

Контент 1 .
 
Контент 2 .
 
Контент 3 .
 .  

Использование в качестве параметра метода text функции (добавим в скобках к содержимому каждого выбранного элемента длину его текстовой информации):

Некоторое содержимое.
 
Ещё некоторый контент.
 .  

Удаление контента элемента

В jQuery для удаления содержимого элемента имеется метод empty . Данный метод не только удаляет элементы, но и другие его дочерние узлы, включая текст.

Например, удалим содержимое всех элементов с классом vote :

Получение значения элемента формы

В jQuery чтение значений элементов input , select и textarea осуществляется посредством метода val .

Например, получим значение элемента input :

 .  

Метод val , если в коллекции присутствует несколько элементов, вернёт значение только первого из них.

 Белый 
 Зелёный 
 Коричневый 
.  

Для получения значения выбранного элемента ( select , checkbox , или radio кнопок) используйте :checked .

// получить значение выбранной опции select $('select.color option:checked').val(); // получить значение выбранного select $('select.size').val(); // получить значение отмеченного (checked) checkbox $('input[type="checkbox"][name="answers"]:checked').val(); // получить значение установленной радиокнопки $('input[type="radio"][name="rating"]:checked').val();

Если коллекции нет элементов, то метод val возвращает значение undefined .

Например, получим значение элемента textarea , имеющего имя description :

var valDescription = $('textarea[name="description"]').val(); if (valDescription !== undefined) { console.log('Значение элемента textarea: ' + valDescription); } else { console.log('Элемент textarea с именем description на странице не найден!'); }

Получим значение элемента select :

 16Gb 32Gb  .  

Если элемент select имеет множественный выбор (атрибут multiple ), то метод val возвратит в качестве результата массив, содержащий значение каждой выбранной опции ( option ). Если ни одна опция не отмечена, то данный метод вернёт в качестве ответа пустой массив (до версии jQuery 3 значение null ).

 Acer Samsung Asus   

Установка значения элементу формы

Изменение значения элемента формы в jQuery осуществляется с помощью метода val .

Например, при клике на кнопку установим элементу input её текст:

 
Кнопка 1 Кнопка 2 Кнопка 3 
 .  

Данный метод устанавливает значение для всех элементов набора, к которому он применяется.

Например, преобразуем все буквы значения элемента input после потеря фокуса в прописные:

 .  

Например, поменяем значение элемента select :

 Красный Зелёный Синий   

Например, присвоим значения элементу select с множественным выбором ( multiple ):

 Английский Французский Испанский Китайский  .  

Изменим, значение checkbox :

 Вы знаете английский .  

Источник

Jquery: убрать все определенные теги HTML из строки

Я хотел бы удалить все теги определенного типа. Скажем, например, теги p и span . Это лучшее, что я могу придумать:

var temp = "
Some text
More texthere
Even more
"; var $temp = $(temp); $("p", $temp).replaceWith("foo"); alert($temp.html()); //returns "Some text" 

Самый близкий ответ, который я смог найти, — это ответ Ника Крейвера: теги strip span из строки с jquery.

отредактированный вопрос: теги p и теги span — это то, что я хочу заменить. Но это может измениться в будущем.

4 ответа

.contents() получит элементы и текст внутри каждого такого тега, а .unwrap будет удалите элемент, обертывающий каждый раздел содержимого.

Основываясь на вашем текущем подходе, он будет выглядеть примерно так:

var temp = "
Some text
More texthere
Even more
"; var $temp = $(temp); $temp.find('span, p').contents().unwrap().end().end(); 

Если вы хотите продолжить таргетинг на исходный объект, вы должны использовать .end() , чтобы очистить фильтр.

Надеюсь, я не поняла ваш вопрос. Вы просто пытаетесь избавиться от тегов, но оставляете текст правильно?

Да, я просто хочу удалить определенные теги и сохранить текст и все другие теги. Но я не смог заставить работать вышеперечисленное в этом примере: [ jsfiddle.net/nEFhA/]

@iammatthew2 iammatthew2 Это прекрасно работает. Вы забыли включить jQuery: jsfiddle.net/WPpqE (вы должны указать платформу для использования в опциях слева)

Это действительно так — спасибо! Теперь, как мне запустить это для строки, содержащейся в переменной? Я неудачно попробовал это: jsfiddle.net/PgJnW

@iammatthew2 iammatthew2 Это работает, но вы должны быть осторожны с целевым объектом jQuery — jsfiddle.net/VwTHF Я обновил свой ответ выше. Если вы хотите продолжить нацеливание на исходный объект, вы должны использовать .end() чтобы очистить фильтр.

Примечание: .html() будет возвращать только содержимое элемента — только содержимое div . .text() вернет все. jsfiddle.net/VwTHF/1

Показывать в оповещении? Я не могу придумать ни одного тривиального способа сделать это. .html() игнорирует текст, не заключенный в элемент, а .text() игнорирует теги html. JQuery не предназначен для использования в качестве библиотеки для работы со строками — эти методы будут хорошо работать с DOM-манипуляциями. Например, если вы добавите $temp к элементу в DOM, он отобразит соответствующий текст, завернутый в правильные элементы (даже если вы не видите его в предупреждении)

Спасибо за вашу помощь. Можете ли вы или кто-либо еще порекомендовать библиотеку для работы со строками?

Возможно, это мой единственный выбор, но я пытался найти способ избежать использования javascript и reg ex, поскольку слышал, что это плохая идея.

Вы можете попробовать jquery plugin HTML Clean. В этом примере они обеспечивают:

$.htmlClean("
", ); => 
Nested P Test
 

Вы можете заменить определенные теги на , и он все равно будет отображать содержимое, а не тег.

Спасибо! Я попробую, но я подумал, что Jquery может позаботиться об этом с помощью всего лишь нескольких строк кода.

Я буду следить за @nbrooks, потому что его ответ очень близок к тому, что вы хотите, но не совсем. @nbrooks ударил по решению, отметив, что html() предоставляет вам данные, которые завернуты в тег. Поэтому решение состоит в том, чтобы обернуть ваш HTML в тег. Это должно сделать трюк для вас:

var temp = "
Some text
More texthere
Even more
"; $("" + temp + "").find('span,p'). contents().unwrap().end().end().html()` 

В качестве более общей функции:

function stripTags(html, tags) < // Tags must be given in CSS selector format return $("" + html + "").find(tags). contents().unwrap().end().end().html(); > 

Источник

Как с помощью JQuery удалить теги блока, Не удаляя содержимое?

Нужно убрать тег a, но т.к. содержимого в ней много, unwrap вроде бы как не подходит.
Элементы каким-то загадочным образом (не наша админка) обернулись в такие ссылки, вот я их и разворачиваю.

Средний 3 комментария

Элементы каким-то загадочным образом (не наша админка) обернулись в такие ссылки, вот я их и разворачиваю.

Определенно, вы не с той стороны подходите к проблеме, пытаясь устранить последствия вместо искоренения причины.

Сергей delphinpro, я как раз таки в своё время пытался понять причину, в то время как наш старший сотрудник сразу принялся решать проблему. Подобная проблема уже была, вот я и пытаюсь её решить. Возможно, это как-то связано с Не нашей админкой, к которой у нас нет полного доступа.

let s = document.querySelector('.tra-la-la').innerHTML; s = s.replace(/^]*>/, '').replace(/$/, ''); document.querySelector('.tra-la-la').innerHTML = s;

PS возможно потребуется оттримить строку.

PPS
что-то я какую-то херню написал.

let s = document.querySelector('.tra-la-la > a').innerHTML; document.querySelector('.tra-la-la').innerHTML = s;

PPPS. Не заметил что jquery, тогда еще проще/короче:
$(‘.tra-la-la’).html($(‘.tra-la-la > a’).html());

Спасибо за ответ. Первый вариант работает, но есть уточнение: думаю, будет эффективней, если я укажу класс ссылки, чтобы удалить именно нужную. У вас там наверное регулярное выражение, а я в них не силён.

Источник