Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Получить содержимое тега из текста (https://javascript.ru/forum/misc/84134-poluchit-soderzhimoe-tega-iz-teksta.html)

calebelt 13.06.2022 11:32

Получить содержимое тега из текста
 
Добрый день!
Подскажите пожалуйста как получить из текста тег и его содержимое?
К примеру я хочу получить всё что внутри тега pagination:
var mytext='<div class="tratata"><h1>sdgljsdg</h1><p>fdgkdfglkjdflgkj</p></div><div class="pagination"><div class="num">1</div><div class="num">2</div><div class="num">3</div></div><div class="tratata2"><h1>sdgljsdg</h1><p>fdgkdfglkjdflgkj</p></div>';

voraa 13.06.2022 12:15

Непосредственно из текста трудно - надо писать свой парсер.
Проще создать элемент, всавить в него этот html код, а потом взять нужную часть
Так, например
const mytext=`<div class="tratata"><h1>sdgljsdg</h1><p>fdgkdfglkjdflgkj</p></div><div class="pagination"><div class="num">1</div><div class="num">2</div><div class="num">3</div></div><div class="tratata2"><h1>sdgljsdg</h1><p>fdgkdfglkjdflgkj</p></div>`;

const tmp = document.createElement('template');
tmp.innerHTML = mytext;
const fr = tmp.content;
const epag = fr.querySelector('.pagination');
const res = epag.innerHTML;
console.log(res);

calebelt 13.06.2022 12:33

Нашёл следующее решение с использованием DOMParser().
Посмотрел совместимость вроде подходит под все современные браузеры.
Написал код, вроде пока работает, возможно кому-то пригодится как пример (в мобильных браузерах ещё не испытывал).
//AJAX пагинация для Joomla
function ajaxLoadBlogItems(){
	var nextPageLink='';
//Проверяю что на странице есть ссылка на следующую страницу и если есть то беру оттуда значение, а саму пагинацию удаляю
	if(d.querySelector('section.blog .pagination-next a')){
		nextPageLink=d.querySelector('section.blog .pagination-next a').getAttribute('href');
		d.querySelector('section.blog .pagination').remove();
	}
	d.querySelector('#ajax-load-pages').addEventListener('click',function(){
//По клику на кнопку загружаю целиком страницу которую получил по ссылке выше
		if(nextPageLink.length>0){
			if (nextPageLink.indexOf('&tmpl=component') < 0) {
				nextPageLink += '&tmpl=component';
			}
			var blogReq=new XMLHttpRequest();
			blogReq.open('GET', nextPageLink,false);
			blogReq.onreadystatechange = function(){
				if(blogReq.readyState === XMLHttpRequest.DONE && blogReq.status === 200) {
//Выдёргиваю нужные куски из responcseText (а там страница целиком) и помещаю в конец блога.
					var parser = new DOMParser();
					var ajaxDoc = parser.parseFromString(blogReq.responseText, "text/html");
					ajaxDoc.querySelectorAll('.blog-item').forEach(function(bitem){
						d.querySelector('section.blog .items-container').append(bitem);
					});
					if(ajaxDoc.querySelector('section.blog .pagination-next a')){
						nextPageLink=ajaxDoc.querySelector('section.blog .pagination-next a').getAttribute('href');
					} else {
						d.querySelector('#ajax-load-pages').style.display='none';
					}
				}
			}
			blogReq.send();
		}
	});
}
//Пока работает. Возможно что-то неправильно сделал, но я в JS откровенный слабак :)


Часовой пояс GMT +3, время: 12:32.