2016-10-07 3 views
2

Давайте предположим, что у меня есть эта строка:поиск по классам в строке Javascript

var myhtml= "<html><body><div class='header'>Welcome</div><div class='news' id='new_1'>Lorem ipsum....</div><div class='news' id='new_2'>dolor sit amet...</div></body></html>";

Ну, если бы это было на обычном сайте я мог бы использовать «getElementsbyClassName», чтобы получить все элементы с класс, который я хочу выбрать (в моем случае, «новости»). Но ... Если это похоже на этот случай, когда у вас есть все html в переменной, как я могу их получить? Есть ли способ, чтобы все div с классом были «новостями»?

+0

вы можете использовать виртуальный РОМ, то вы можете использовать стандартные функции DOM https://github.com/tmpvar/jsdom –

+2

Какая среда? Node.js или клиентская JS? –

+0

Создать элемент, установить innerHTML, element.getElementsByClassName() – Malk

ответ

5

Вы можете использовать cheerio для этого:

var cheerio = require('cheerio'); 

var myhtml = "<html><body><div class='header'>Welcome</div><div  class='news' id='new_1'>Lorem ipsum....</div><div class='news' id='new_2'>dolor sit amet...</div></body></html>"; 

var $ = cheerio.load(myhtml); 

console.log($('.header').html());//Welcome 
+0

Это то, что я искал. Огромное спасибо. +1 :) –

1

При условии, что это на стороне клиента JS и JQuery вы говорите (неясно, в тегах, смешанные теги ENV):

var myhtml= "<html><body><div class='header'>Welcome</div><div class='news' id='new_1'>Lorem ipsum....</div><div class='news' id='new_2'>dolor sit amet...</div></body></html>"; 
var dom = $.parseHTML(myhtml); 
var elem = $(dom).find(".news"); 
1

Да , вы можете получить их так же, как на обычной HTML-странице, ключ - получить элементы ПОСЛЕ того, как они были созданы, поэтому ваш код, выбирающий класс, должен появиться после кода, который заполняет страницу. Пример:

var myhtml= "<html><body><div class='header'>Welcome</div><div  class='news' id='new_1'>Lorem ipsum....</div><div class='news' id='new_2'>dolor sit amet...</div></body></html>"; 

var x = document.getElementsByClassName("news"); 

var i; 
for (i = 0; i < x.length; i++) { 
x[i].style.color = "red"; 
} 
+0

Этот пример не работает, как указано, так как нет инструкции для применения этого HTML к dom –

1

Я рассмотрел немного другой способ решить эту проблему, сначала создать виртуальный документ затем вставить этот HTML в виртуальный документ, то вы можете найти любой HTML элемент, используя регулярный селектор, здесь как он идет:

let htmlString= "<html><body><div class='header'>Welcome</div><div class='news' id='new_1'>Lorem ipsum....</div><div class='news' id='new_2'>dolor sit amet...</div></body></html>"; 

let virtualDocument = document.implementation.createHTMLDocument("Virtual Document"); 

virtualDocument.documentElement.innerHTML = htmlString; 

selectedEle = virtualDocument.querySelectorAll(".news"); 

console.log(selectedEle); // Your selected element 

Но будьте осторожны, как с помощью document.implementation.createHTMLDocument и проверьте таблицу совместимости

Смежные вопросы