在字符串 javascript 中按类搜索答案

【问题标题】：search by class in string javascript在字符串 javascript 中按类搜索
【发布时间】：2017-02-16 17:02:48
【问题描述】：

假设我有这个字符串：

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

好吧，如果这是在一个普通的网站上，我可以使用“getElementsbyClassName”来获取我想要选择的类的所有元素（在我的例子中是“新闻”）。但是......如果是这样的情况，当你有一个变量中的所有 html 时，我怎样才能得到它们？有没有办法让所有的 div 都是“新闻”？

【问题讨论】：

您可以使用虚拟 dom，然后您可以使用标准 DOM 功能github.com/tmpvar/jsdom
哪个环境？ Node.js 还是客户端 JS？
创建元素，设置innerHTML，element.getElementsByClassName()
Well, if this was on a normal website 我想这解释了我们需要知道的，他想在 node.js 端解析。

标签： javascript jquery html node.js

【解决方案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 并检查兼容性表

【讨论】：

【解决方案2】：

是的，您可以像在常规 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";
}

【讨论】：

这个例子没有按照说明工作，因为没有声明将此 HTML 应用到 dom

【解决方案3】：

如果你说的是客户端 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");

【讨论】：

【解决方案4】：

您可以为此使用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

【讨论】：

这就是我要找的。太感谢了。 +1 :)