Criando um objeto jQuery a partir de uma grande string HTML


140

Eu tenho uma grande seqüência de caracteres HTML contendo vários nós filhos.

É possível construir um objeto DOM jQuery usando essa string?

Eu tentei, $(string)mas ele retorna apenas uma matriz que contém todos os nós individuais.

Tentando obter um elemento no qual eu possa usar a função .find ().


Onde está o HTML, o que você deseja construir com ele? Você pode querer olhar para o .find () função: api.jquery.com/find
Control Freak

3
Um objeto jQuery é um objeto semelhante a uma matriz que contém todos os nós. Você pode elaborar o que está tentando alcançar?
Frédéric Hamidi

Onde está 'essa string'? que corda?
Viezevingertjes 15/06

Dê uma olhada aqui, eu acho que é o que você quer stackoverflow.com/q/759887/474535
Bart s

Eu tenho que passar o elemento de um WebView para outro através de uma string, a string seria apenas a fonte HTML desse elemento. Eu acho que posso ter entendido mal o que é um objeto jQuery.
user1033619

Respostas:


200

Atualizar:

No jQuery 1.8, podemos usar $ .parseHTML , que analisará a string HTML em uma matriz de nós DOM. por exemplo:

var dom_nodes = $($.parseHTML('<div><input type="text" value="val" /></div>'));

alert( dom_nodes.find('input').val() );

DEMO


var string = '<div><input type="text" value="val" /></div>';

$('<div/>').html(string).contents();

DEMO

O que está acontecendo neste código:

  • $('<div/>')é uma farsa <div>que não existe no DOM
  • $('<div/>').html(string)acrescenta stringdentro desse falso <div>quando crianças
  • .contents()recupera os filhos desse falso <div>como um objeto jQuery

Se você quiser fazer o .find()trabalho, tente o seguinte:

var string = '<div><input type="text" value="val" /></div>',
    object = $('<div/>').html(string).contents();

alert( object.find('input').val() );

DEMO


1
@ user1033619 você pode realizar .find()operação também, verificar o demo
thecodeparadox

Mas como sestring = '<input type="text" value="val" />'
fdrv

1
Se você pode fazer $("<div/>"), por que não pode $(string)?
Xr280xr

2
Com HTML mais complexo, eu precisava remover .contents para fazer com que isso funcionasse. jsfiddle.net/h45y2L7v
Simon Hutchison

Você não quer fazer $ (string) porque precisa de uma div de empacotamento para obter o conteúdo de. Você estará recebendo o conteúdo da div, que será sua entrada.
Michael Khalili

120

A partir do jQuery 1.8, você pode usar o parseHtml para criar seu objeto jQuery:

var myString = "<div>Some stuff<div>Some more stuff<span id='theAnswer'>The stuff I am looking for</span></div></div>";
var $jQueryObject = $($.parseHTML(myString));

Eu criei um JSFidle que demonstra isso: http://jsfiddle.net/MCSyr/2/

Ele analisa a string HTML arbitrária em um objeto jQuery e usa find para exibir o resultado em uma div.


10
Acho essa resposta muito melhor, pois isso não precisa usar um elemento div de fantasma. $ .parseHtml ftw.
ZeeCoder

2
Esta resposta não funcionou para mim quando eu queria, então, para $ jQueryObject.find (), presumo que não foi adicionada ao domínio naquele momento.
Dougajmcdonald

@dougajmcdonald - find deve funcionar sem que o conteúdo seja adicionado ao dom. Se você der uma olhada no meu violino ( jsfiddle.net/MCSyr/2 ), estou chamando find no objeto jQuery e ele retorna um resultado conforme o esperado: $ jQueryObject.find ("# theAnswer"). Html ()
kiprainey

1
@kiprainey interessante, vou desenterrar o exemplo que não deu para mim e ver se havia mais alguma coisa acontecendo. Foi escrito dentro de um módulo TypeScript dentro de uma carga de outra lógica, poderia muito bem ter sido um problema diferente! Me desculpe.
Dougajmcdonald

8
Vale ressaltar que o parseHTML foi adicionado no jQuery 1.8
Jean-Michel Garcia

12
var jQueryObject = $('<div></div>').html( string ).children();

Isso cria um objeto jQuery fictício no qual você pode colocar a string como HTML. Então, você recebe apenas os filhos.


2
Eu tentei isso, mas ele não funciona com a função .find () que eu tenho que usar mais tarde.
user1033619

3
@ user1033619 você deve usar em .filter()vez de .find().
Kulbir Saini

2

Há também uma ótima biblioteca chamada cheerio, projetada especificamente para isso.

Implementação rápida, flexível e enxuta do jQuery principal, projetado especificamente para o servidor.

var cheerio = require('cheerio'),
    $ = cheerio.load('<h2 class="title">Hello world</h2>');

$('h2.title').text('Hello there!');
$('h2').addClass('welcome');

$.html();
//=> <h2 class="title welcome">Hello there!</h2>

1

Eu uso o seguinte para meus modelos de HTML:

$(".main").empty();

var _template = '<p id="myelement">Your HTML Code</p>';
var template = $.parseHTML(_template);
var final = $(template).find("#myelement");

$(".main").append(final.html());

Nota: Supondo que você esteja usando jQuery


1

a razão pela qual $ (string) não está funcionando é porque o jquery não está encontrando conteúdo html entre $ (). Portanto, você precisa primeiro analisá-lo em html. depois de ter uma variável na qual você analisou o html. você pode usar $ (string) e usar todas as funções disponíveis no objeto

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.