Question

我有一个JavaScript变量，其中包含一个HTML页面，由于设置，我需要使用JavaScript从该变量中提取<div id="LiveArea">和</div>之间的所有内容。

非常感谢任何帮助。

Answer 1

var html = "<stuff><div id=\"LiveArea\">hello stackoverflow!</div></stuff>";

var matches = html.match(/<div\s+id="LiveArea">[\S\s]*?<\/div>/gi);
var matches = matches[0].replace(/(<\/?[^>]+>)/gi, ''); // Strip HTML tags?

alert(matches);

Answer 2

这应该这样做：

pattern = /<div id="LiveArea">(.*?)<\/div>/;
matches = your_html_var.match(pattern);
the_string = matches[0];

document.write(the_string);

Answer 3

只有正则表达式才能实现这一点，除非该div内的HTML不包含其他div。因为像Jeremy这样的模式会发生什么，它会匹配第一个结束div标签，它不一定是div #LiveArea元素的结束标签。

如果您可以控制源HTML，则可以插入一条注释，用于匹配正确的“关闭”位置。

还有其他仅限javascript的选项，但它们都是非常kludgy或hacky

将隐藏元素的innerHTML设置为等于此内容字符串，然后使用mmattax解决方案拉出您需要的innerHTML。但是你可能不得不在这里执行第二步，超时给浏览器时间来评估这个新的HTML并将它暴露给DOM。
实际解析内容，在遇到内容时跟踪打开/关闭div，这样您就可以知道何时使用了正确的</div>代码。

Answer 4

var temp = document.createElement('DIV');
temp.innerHTML = YourVariable;
var liveArea;
for (var i = 0; i < temp.childNodes.length; i++)
{
   if (temp.childNodes[i].id == 'LiveArea')
   {
       liveArea = temp.childNodes[i];
       break;
   }
}

Answer 5

当你说“拥有html页面的Javascript变量”时，我不确定是否会关注你，但如果你需要在这样的div之间提取HTML，你可以使用该元素的innerHTML属性。


var e = document.getElementById('LiveArea');
if(e) alert(e.innerHTML);

Answer 6

我发现这个article在网上冲浪，它带有DIV ID并在新页面上显示它以进行打印;

function getPrint(print_area)
{
//Creating new page
var pp = window.open();
//Adding HTML opening tag with <HEAD> … </HEAD> portion 
pp.document.writeln('<HTML><HEAD><title>Print Preview</title>')
pp.document.writeln('<LINK href=Styles.css type="text/css" rel="stylesheet">')
pp.document.writeln('<LINK href=PrintStyle.css ' + 
                    'type="text/css" rel="stylesheet" media="print">')
pp.document.writeln('<base target="_self"></HEAD>')

//Adding Body Tag
pp.document.writeln('<body MS_POSITIONING="GridLayout" bottomMargin="0"');
pp.document.writeln(' leftMargin="0" topMargin="0" rightMargin="0">');
//Adding form Tag
pp.document.writeln('<form method="post">');

//Creating two buttons Print and Close within a HTML table
pp.document.writeln('<TABLE width=100%><TR><TD></TD></TR><TR><TD align=right>');
pp.document.writeln('<INPUT ID="PRINT" type="button" value="Print" ');
pp.document.writeln('onclick="javascript:location.reload(true);window.print();">');
pp.document.writeln('<INPUT ID="CLOSE" type="button" ' + 
                    'value="Close" onclick="window.close();">');
pp.document.writeln('</TD></TR><TR><TD></TD></TR></TABLE>');

//Writing print area of the calling page
pp.document.writeln(document.getElementById(print_area).innerHTML);
//Ending Tag of </form>, </body> and </HTML>
pp.document.writeln('</form></body></HTML>');

}

您将调用此脚本发送您想要获取的DIV ID;

btnGet.Attributes.Add("Onclick", "getPrint('YOURDIV');")

它完全符合我的要求。希望它有所帮助

Answer 7

似乎javascript不支持非常令人失望的lookbehinds，这会使这个问题更容易解决。

(?<=<div id="LiveArea">).*(?=<\/div>)

这里有一些可能有助于你的链接。

虽然在讨论嵌套标签的问题时...这将超出正则表达式的解决能力，所以杰里米的解决方案是你可以用正则表达式做的最好的。而且他们必须在一条线上......如果div的内容在单独的行上，它甚至不会匹配，因为javascript没有's'标志。我认为彼得已经给出了这个答案。

Answer 8

让jQuery为你做解析：

$(page_html).find("#LiveArea").html();

Answer 9

使用以下正则表达式：

<div id="[^"]*">(.*?)</div>

Answer 10

很抱歉迟到的回复，如果其他人偶然发现此问题，这是我的建议，假设您可以访问您正在阅读的源代码页面。

添加像这样的HTML评论

<div id="LiveArea">
<!--LiveArea-->
Content here
<!--EndLiveArea-->
</div>

然后将其与

匹配

htmlVal.match(/<\!\-\-LiveArea"\-\->(.*?)<\!\-\-EndLiveArea"\-\->/);

用于div标签的JavaScript RegEx

10 个答案: