We Keep Coding

How to scrape data from following html using querySelector or jQuery

I want to get text from this html using querySelector or jQuery.
<td>
<a href="#" class="verify-address pull-right">
Verify Address
</a>
<div class="verify-address-address-content">
Tom Heilig<br>
8642 PEPPER LN<br>
</div>
MECHANICSVILLE, VA 22221-4943 US
<br>
+1 412-111-1111<br>
<div class="text-success" style="white-space:normal">
<span>Address Verified</span>
</div>
</td>
OUTPUT should be like
Tom Heilig
8642 PEPPER LN
MECHANICSVILLE, VA 22221-4943 US
+1 412-111-1111
Can any one please help me out in this?

Let's say td's inner content is wrapped inside a div with id datarow like that:
<td>
<div id="datarow">
...
</div>
</td>
Then this Jquery code will work like charm:
alert(
$("#datarow").clone() // Clone the content
.find('span').remove() // Remove all span tags
.end() // Return to the clone
.text() // Only text
)

Get HTML Text that has no tag [duplicate]

This question already has answers here:
Find a string of text in an element and wrap some span tags round it
(6 answers)
Closed 5 years ago.
I'm trying to access a piece of text inside a DIV that has no HTML through jquery (In this case the words "12 Months"). I know that I could find it if I knew the class or id, but in this case it seems it has no way to be grabbed. Can somebody provide a potential solution?
<div class="pms-subscription-plan">
<label>
<input type="radio" name="subscription_plans" data-price="19.99" data-duration="12" value="1219">$19.99 cada 12 meses</label>
<span class="pms-divider"> - </span><span class="pms-subscription-plan-price">19.99</span>
<span class="pms-subscription-plan-currency">$</span>
<span class="pms-divider"> / </span> 12 Months //This piece of text is the one I need to get and change
<div class="pms-subscription-plan-description">Si usted escogió la suscripción $19.99, se le cobrará por esa cantidad anualmente.</div>
</div>
If it helps, here's a printout of the code as seen in the inspector.

This works!
var a = $('.pms-subscription-plan').first().contents().filter(function() {
return this.nodeType == 3;
}).text();
console.log($.trim(a));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pms-subscription-plan">
<label>
<input type="radio" name="subscription_plans" data-price="19.99" data-duration="12" value="1219">$19.99 cada 12 meses</label>
<span class="pms-divider"> - </span><span class="pms-subscription-plan-price">19.99</span>
<span class="pms-subscription-plan-currency">$</span>
<span class="pms-divider"> / </span> 12 Months
<div class="pms-subscription-plan-description">Si usted escogió la suscripción $19.99, se le cobrará por esa cantidad anualmente.</div>
</div>
But you have to be sure that you don't restructure.

var text = $(".pms-subscription-plan").contents().filter(function() {
return this.nodeType == Node.TEXT_NODE;
}).text();

In this case, the following code will work:
document.getElementsByClassName("pms-divider")[1].nextSibling
HOWEVER, I would strongly recommend putting this text in a tag. This code will not work if you in any way restructure your DOM.

In HTML there are elements and nodes. Each piece of text is a node. You can use the childNodes collection.
var textNode = document.querySelector(".pms-subscription-plan").childNodes[9].data.trim();

You could, as others have suggested, use the node/next sibling to get the text.
However, it would be a much better option to make a small adjustment to your html/css such as this:
<div class="pms-subscription-plan">
<label>
<input type="radio" name="subscription_plans" data-price="19.99" data-duration="12" value="1219">$19.99 cada 12 meses</label>
<span class="pms-divider"> - </span><span class="pms-subscription-plan-price">19.99</span>
<span class="pms-subscription-plan-currency">$</span>
<span class="pms-divider">/</span>
<span class="pms-duration">12 Months</span> <!--add a span class for duration--->
<div class="pms-subscription-plan-description">Si usted escogió la suscripción $19.99, se le cobrará por esa cantidad anualmente.</div>
</div>
and this small change [adding a span class for the duration] would make it easier for you in the long run. Just my tuppence!
Hope this helps

This function will remove all the tags and content. What's left is the text you require:
function removeTags(){
var txt = $(".pms-subscription-plan").html();
var rex = /(<([^>]+)>).*(<([^>]+)>)|(<([^>]+)>)/ig;
alert(txt.replace(rex , ""));
}

JSOUP get all information starts with

<li data-id="63947814" data-author="ac ca" data-author-id="1387539" data-flags="share report vote" data-isfavorite="false" data-favorite-count="22" data-seyler-slug="" data-comment-count="0">
<div class="content"> el kadar bebelere üstelik hükümetin kıymetlisi olan bir vakıfta tecavüz edilirken üç maymunu oynayan adalet sistemimizin annenin terliğine takılması '' ... sürecek kadar akıl yok'' dedirtiyor..
<br/>ve bazı malların arzusu gerçek olursa bu sığırlar idam kararları alacaklar, kimi asacaklar ki acaba..
<br/>bilmem anlatabiliyor muyum?
</div>
<footer>
<div class="feedback"></div>
<div class="info"> <a class="entry-date permalink" href="/entry/63947814">07.11.2016 12:29</a> <a class="entry-author" href="/biri/ac-ca">ac ca</a> </div>
</footer>
<div class="comment-summary">
<div class="comment-pages"> </div>
</div>
</li>
I've got this html code.My question is i want to parse it with JSOUP like : i will get all li data-id=* informations.This website contains random data-id's so all i just wants get data starts with anything "li data-id="
Elements links = document.select("li[data-id=63947814]");
it's works only got id "63947814".
i've tried "*" : Elements links = document.select("li[data-id=*]");or
Elements links = document.select("li[data-id=\"*\"]");
but it doesnt work.Searched JSON API's and didn't get all i wanted.
so much thanks.

You should use Attribute selector, it will select all the elements with data-id attribute.
Elements links = document.select("li[data-id]");

Dynamic div does not work in Chrome

Last year I published this one page site: www.rofeengenharia.com.br
In the Portifolio page if you click on "Abrir" it loads a dynamic div with javascript over the Portifolio page. In Safari and Firefox it is still working, but it stopped working in Chrome (it was working in Chrome too when I published it).
Here is part of the code:
The place where the dynamic div is loaded and the link to open it (onClick):
<DIV id="projeto_selecionado" style="position:absolute; z-index:20000; background:#ffffff;">
</DIV>
<!-- OBRA 1 -->
<DIV class="view view-sixth">
<IMG width="100%" height="auto" style="float:left;" src="images/portifolio/obra01/obra01_thumb_01.jpg" alt="Obra 01" />
<DIV class="mask">
<H2>Condomínio Jardim Acapulco</H2>
<P>Manutenção executada pela ROFE no litoral sul de São Paulo.</P>
Abrir
</DIV>
</DIV><!-- view -->
And the javascript file:
function exibir_projeto01()
{
$('<div/>').addClass("newdiv")
.html('<DIV id="projeto_selecionado">\
...
...
...
</DIV><!-- container_projeto_01 -->')
.appendTo($("#projeto_selecionado"))
.hide()
.fadeIn(1000);
// Não deixa a pagina voltar para o topo quando clica no link
event.preventDefault();
}
Anyone knows how to make it work in Chrome again?

Try using jQuery - remove the inline onclick and do this instead - also you try to add something with ID #projeto_selecionado to itself
$(".info").on("click",function(e) {
e.preventDefault();
$('<div/>').addClass("newdiv")
.html('<DIV>\
...\
...\
...\
</DIV>')
.appendTo("#projeto_selecionado")
.hide()
.fadeIn(1000);
});
WITHOUT html comments!

Javascript window.open changes the main page too

I'm having trouble opening a popup to share on facebook.
When I press the "button" popup opens correctly, but back in the page from where I called it also shows the contents of that url.
I tried leaving blank href, also with #, but none get a good result.
This is the code:
<a href="http://www.facebook.com/sharer.php?s=100&p[url]=http://www.misbooks.com.ar/titulo.php?id=3304&p[title]=Juego de tronos&p[summary]=Tras el largo verano, el invierno se acerca a los Siete Reinos. Lord Eddars Stark, señor de Invernalia, deja sus dominios para unirse a la corte del rey Robert Baratheon el Usurpador, hombre díscolo y otrora guerrero audaz cuyas mayores aficiones son comer, beber y engendrar bastardos. Eddard...&p[images][0]=http://www.misbooks.com.ar/img/portadas/3304.jpg" onclick="window.open(this.href, 'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=626,height=436')">
<i class="pluginButtonIcon img sp_like sx_like_fav alignButtonImage"></i>
<span class="accessible_elem alignButtonImage">Compartir</span>
</a>
Someone can help me?
Thanks.

Just add return false; to your onclick function:
onclick="window.open(this.getAttribute('_url'), 'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=626,height=436'); return false;"

Well, you can try this:
<a href="" _url="http://stackoverflow.com" onclick="window.open(this.getAttribute('_url'), 'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=626,height=436')">
<i class="pluginButtonIcon img sp_like sx_like_fav alignButtonImage"></i>
<span class="accessible_elem alignButtonImage">Compartir</span>
</a>