Tengo una variable de JavaScript que contiene una página HTML y debido a la configuración necesito extraer todo entre <div id="LiveArea"> y </div> de esa variable mediante JavaScript.JavaScript RegEx para las etiquetas div
Cualquier ayuda es muy apreciada.
No estoy seguro de seguirlo cuando diga "Variable de Javascript que contiene una página html", pero si necesita extraer el HTML entre dicho div, puede usar la propiedad innerHTML del elemento.
var e = document.getElementById('LiveArea');
if(e) alert(e.innerHTML);
Esto debe hacerlo:
pattern = /<div id="LiveArea">(.*?)<\/div>/;
matches = your_html_var.match(pattern);
the_string = matches[0];
document.write(the_string);
Debería ser coincidencias [1] para obtener la parte dentro del div. Y de hecho, uno debe esperar que no haya divisiones internas ... Podría funcionar en un contexto bien definido. – PhiLho
Eso no funcionaría porque el final del partido podría coincidir con una etiqueta de cierre que no corresponde (necesariamente) a su etiqueta de apertura. Si hace que la expresión sea floja, podría detenerse en un 'div' de cierre dentro de' LiveArea'; si es codicioso, se detendría en el último 'DIC' de cierre, una vez más, no necesariamente el correspondiente a su' DIV' de apertura. Además, PhilLho tiene razón: 'matches [0]' mantendrá el patrón completo coincidente y 'matches [1]' mantendrá su grupo de captura. –
esto no será posible con sólo una expresión regular a menos el código HTML dentro de ese div no contiene otros divs. Porque lo que sucederá con un patrón como el de Jeremy es que coincidirá con la primera etiqueta div de cierre, que no sería necesariamente la etiqueta de cierre para el elemento div # LiveArea.
Si tiene control sobre el código fuente HTML, puede insertar un comentario que pueda usar para que coincida con la ubicación correcta de "cierre".
Existen otras opciones de JavaScript, pero son cada uno muy kludgy o hacky
</div>.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;
}
}
¿Por qué se vota por esto? Ni siquiera funciona. HTMLElement.getElementById() no es un método DOM estándar. Si esta solución se basa en una biblioteca de terceros, entonces la respuesta debe indicarlo como tal. –
Muy bien, por alguna razón, pensé que HTMLElements tenía getElementById en ellos (deberían), lo he corregido de una manera que funcionará. – FlySwat
Estoy de acuerdo, deberían tener ese método. Aún así, esta solución asume que div # LiveArea realmente será un nodo secundario, y no un descendiente más profundo, que puede no ser el caso con el código fuente HTML. –
yo encontramos este article surf en la web, que tienen un ID de DIV y se lo muestra en una nueva página para imprimirlo;
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>');
}
Va a llamar a esta secuencia de comandos que envía el ID de DIV desea obtener;
btnGet.Attributes.Add("Onclick", "getPrint('YOURDIV');")
Funcionó exactamente como yo quería. Espero que ayude
Parece que javascript no es compatible con lookbehinds, que es muy decepcionante, que haría que este problema sea mucho más fácil de resolver.
(?<=<div id="LiveArea">).*(?=<\/div>)
aquí son algunos enlaces que pueden ayudar a cabo Tho.
aunque mientras se discute el tema de las etiquetas anidadas ...eso estaría más allá de las capacidades de Regex para resolver, así que la solución de jeremy es lo mejor que puedes hacer con Regex. y lo que es más, tienen que estar en una sola línea ... ni siquiera coincidirá si los contenidos del div están en líneas separadas porque no hay una bandera 's' para javascript. Creo que Peter ha dado la respuesta para este.
Lo siento por la respuesta tardía, si alguien más tropieza con este problema aquí está mi sugerencia, suponiendo que tiene acceso a la página que está leyendo desde el código fuente.
Añadir un HTML comentario como este
<div id="LiveArea">
<!--LiveArea-->
Content here
<!--EndLiveArea-->
</div>
Entonces emparejarlo con
htmlVal.match(/<\!\-\-LiveArea"\-\->(.*?)<\!\-\-EndLiveArea"\-\->/);
Deje jQuery hacer el análisis para usted:
$(page_html).find("#LiveArea").html();
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);
Usar la siguiente expresión regular:
<div id="[^"]*">(.*?)</div>
Gracias, pero no es posible ya que tengo la página web en una variable. –