admin管理员组

文章数量:1390756

Let's suppose I have this string:

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

Let's suppose I have this string:

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

Well, if this was on a normal website I could use "getElementsbyClassName" to get all elements with the class I want to select (In my case, "news"). But... If it's like this case, when you have all the html in a variable, how can I get them? Is there a way to get all the divs with class is "news"?

Share Improve this question asked Oct 7, 2016 at 16:07 about_robotsabout_robots 792 silver badges9 bronze badges 4
  • You could use a virtual dom, then you can use standard DOM functionality github./tmpvar/jsdom – R. Chappell Commented Oct 7, 2016 at 16:11
  • 2 Which environment? Node.js or client-side JS? – George Kagan Commented Oct 7, 2016 at 16:12
  • Create element, set innerHTML, element.getElementsByClassName() – Malk Commented Oct 7, 2016 at 16:15
  • Well, if this was on a normal website I think that explains what we need to know, he want's parsing at the node.js end. – Keith Commented Oct 7, 2016 at 16:16
Add a ment  | 

4 Answers 4

Reset to default 5

You can use cheerio for that:

var cheerio = require('cheerio');

var myhtml = "<html><body><div class='header'>Wele</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() );//Wele

Provided it's client-side JS and jQuery you're talking about (unclear in your tags, mixed env tags):

var myhtml= "<html><body><div class='header'>Wele</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");

Yes, you can get them the same way it would be on a regular HTML page, the key is to get the elements AFTER they have been created, so your code selecting the class has to e after the code that populates the page. Example:

var myhtml= "<html><body><div class='header'>Wele</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";
}

I have considered a bit different way to solve this problem, first creating a virtual Document then insert that HTML into the virtual Document, then you can find any HTML element using the regular selector, here is the how it goes:

let htmlString= "<html><body><div class='header'>Wele</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

But take care as using document.implementation.createHTMLDocument and check patibility table

本文标签: jquerysearch by class in string javascriptStack Overflow