javascript html 正则表达式答案

【问题标题】：javascript html regexjavascript html 正则表达式
【发布时间】：2012-03-06 18:52:38
【问题描述】：

我正在尝试学习 javascript 中的正则表达式解析。

我需要在一个“span”中阅读文本

<span class="item_color_title">Status:</span>
<span class="item_color_success">
Alive
</span>

“活着”是我需要的。有什么简单的出路吗？

这是一个 Firefox 扩展，我已经：

var req = new XMLHttpRequest();  
req.open('GET', 'http://www.example.com/', false);   
req.send(null);  
if(req.status == 200)  
    standard_status.label = req.responseText;

而且，standard_status 应该说“活着”

谢谢！！

【问题讨论】：

你不应该使用正则表达式来解析 html :)

标签： javascript regex parsing

【解决方案1】：

将响应解析为 HTML 片段：

> html = $('<div/>').html(req.responseText)
> $('.item_color_success', html).text()
"Alive"

【讨论】：

这是 OP 正在寻找的东西，sweaver2112 有正确的想法，但没有意识到 responseText 是 HTML 并且它没有附加到 DOM

【解决方案2】：

正则表达式？ jQuery 让它变得微不足道：

alert($('span.item_color_success').html());

【讨论】：

standard_status.label = ?? ..对不起，我不明白如何使用你的代码。我对 javascript 非常陌生。
standard_status.label = $('div.item_color_success').html()。但你也许应该使用.text() 而不是.html()
好的，但是“req”在哪里使用？ Js 知道 $ 是 req ?... 编辑：standard_status.label = req.responseText;工作正常，但显示整个 html。
嗯，IC。好问题 :D $ 不是 req，而是 jquery 方法。 $('div.item_color_success') 将访问 dom 元素（第二个跨度）。但这只有在将接收到的数据附加到 dom 时才有效。

【解决方案3】：

好吧，如果你真的想使用正则表达式，你可以使用这个：

var text   = req.responseText.replace('\n', '')
  , status = text.match(/<span class="item_color_success">(.*)<\/span>/)[1]

standard_status.label = status

您需要替换换行符，因为 js 与 .* 和 /.*/m 的组合没有正确匹配换行符。

希望对您有所帮助。

【讨论】：

如果 jquery 更快更“干净”，我会使用它。谢谢你的回答，我会保留的。
嗯，它肯定不是更快，但更干净。如果您已经在使用 jquery（我对 firefox 扩展一无所知），可以使用它。

【解决方案4】：

如果您不想添加额外的 Jquery 依赖项，可以使用纯 Javascript 来完成。

var req = new XMLHttpRequest();  
req.onload = function() {  
  alert(this.responseXML.title);
  if(req.status == 200){
      standard_status.label = req.responseXml.getElementsByClassName('item_color_success')[0].textContent;
  }
}  
req.open("GET", 'http://www.example.com/');  //must use async request for HTML
req.responseType = "document";  
req.send();

我没有对此进行测试，但应该不会太远。

【讨论】：