Develop Reference

How to split html code from a page into nodes

I want to read the html from a site and then split it into nodes. I tried this code:
function load() {
$(document).ready(function () {
$.get("https://example.com/index.html", function (data) {
const loadpage = async function() {
var nodes = [...data.childNodes].slice(-3);
var cont = document.getElementById("container");
var msg = nodes;
});
if(cont.innerHTML='') {
cont.insertAdjacentHTML('afterbegin', msg);
} else {
cont.innerHTML=msg;
}
};
loadpage();
});
});
}
load();
html looks like this:
<main>
<div class="msg">something</div>
<div class="msg">something</div>
<div class="msg">something</div>
<div class="msg">something</div>
<div class="msg">something</div>
<div class="msg">something</div>
</main>
the expected output should be:
<div class="msg">something</div>
<div class="msg">something</div>
<div class="msg">something</div>
since I want only the last 3 nodes.
Thank you.

It is not necessary to use async await here and you are doing it wrong
Please read How to return values from async functions using async-await from function?
Your load is also wrong and too complex. You should not add a window event handler in a function and the test to insert after if cont is empty is not useful. Your test is also not a comparison (== '' or === '') but an assignment (= '').
Add the data to a partial element and slice the result
$(document).ready(function() {
const cont = document.getElementById("container");
$.get("https://example.com/index.html", function(data) {
const div = document.createElement('div')
div.innerHTML = data; // assuming HTML string?
[...div.querySelectorAll('.msg')]
.slice(-3)
.forEach(div => cont.innerHTML += div.outerHTML);
});
});

show/ hide function in one button (hide_btn)

I have to program an web-app (Mäxle) for an exam and I am a total beginner.
Hopefully s.o. can help me with that.
index.html (buttons):
<div id="buttons_container" class="container">
<div class="row">
<br>
<button type="button" id="shuffle_btn" class="btn btn-primary">shuffle</button>
<button type="button" id="hide_btn" class="btn btn-success">hide / show</button>
</div>
</div>
function.js:
function test_shuffle () {
var arr = ["11",
"21","22",
"31","32","33","34","35","36",
"41","42","43","44","45","46",
"51","52","53","54","55","56",
"61","62","63","64","65","66"];
var max_index = arr.length -1;
var zufall = Math.floor(Math.random() * max_index) + 1 ;
var final = arr [zufall];
$('#ausgabe_shuffle').html(final);
}
function test_hide () {
$("hide_btn").click(function(){
$("--").hide();
});
}
event.js:
$(document).ready(function() {
$('body').on('click', '#shuffle_btn', function (e) {
test_shuffle ();
});
$('body').on('click', '#hide_btn', function (e) {
$("*").html("--");
test_hide ();
});
});
When I click the hide_btn right now, everthing disappears and this "--" will be displayed. The click works but I want to hide the numbers I got from the array, eg. "32"
Thank you very much in advance

$("*").html("--"); // This overrides all html inside body and prints "--".
You can replace this with
$("#ausgabe_shuffle").toggle(); // This will show or hide your values printed inside #ausgabe_shuffle tag.

Jquery: Parsing HTML

I need help in parsing href tags. Currently, everything is being parsed as text, however I need to parse the links so that I can send it to the php page later using AJAX.
my HTML looks like:
<div id="word_content">
<br>Testing Time: 2015-10-29 17:57:11<br>
Total Age: 19<br>
Total Friemd: 9<br>
Total Family: 10<br>
<br>
Here are the suggestions - Him_530037_: 93358546
<h3>Overview</h3><br>
<ul>
<li>(The overlap provided is not good)</li>
</ul>
<h3>Structure</h3><br>
<h4>Target:</h4><br>
<ul>
<li>Audience.</li>
<li>Lookalike</li>
<li>Overlap of Audience</li>
06<font name="names" hidden="" style="display: inline;"> - Page Likes</font>
</ul>
Jquery Code is something like this:
var headTags = $("div#word_content").find("*").filter(function(){
return /^h/i.test(this.nodeName);
});
var output = {};
$(headTags).each(function(){
var currentHead = $(this);
var nextNextElem = currentHead.next().next();
var innerText = [];
if(nextNextElem.prop("tagName") == "UL")
{
nextNextElem.find("li").each(function(){
innerText.push($(this).text());
});
}
output[currentHead.text()] = innerText;
});
Currently, the Jquery is fetching the data, but it is capturing only the text and not the link. I need to parse the link as well, so that this link could be used in further pages. Can someone please help.

use this:
nextNextElem.find("a").each(function(){
innerText.push($(this).text()+" & href is:"+$(this).attr("href"));
});
var headTags = $("div#word_content").find("*").filter(function(){
return /^h/i.test(this.nodeName);
});
var output = {};
$(headTags).each(function(){
var currentHead = $(this);
var nextNextElem = currentHead.next().next();
var innerText1 = [];
if(nextNextElem.prop("tagName") == "UL")
{
nextNextElem.find("li").each(function(index){
innerText1.push(this.firstChild.data);
$(this).children().each(function(index){
innerText1.push("<a href='"+$(this).attr("href")+"'>"+$(this)[0].innerText+"</a>");
if($(this).prop('nextSibling')){
innerText1.push($(this).prop('nextSibling').nodeValue);
}
});
});
}
output[currentHead.text()] = innerText1;
}); console.log(output);
$("#data").html(JSON.stringify(output));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="word_content">
<br>Testing Time: 2015-10-29 17:57:11<br>
Total Age: 19<br>
Total Friemd: 9<br>
Total Family: 10<br>
<br>
Here are the suggestions - Him_530037_: 93358546
<h3>Overview</h3><br>
<ul>
<li>Multiple Countries
603<font name="names" hidden="" style="display: none;"> - Post: "သင့္ရဲ့ Data အသံုးျပဳ မွုကို အေၾကာင္းၾကားေပးေသာ..."</font> (MM, SG),
602<font name="names" hidden="" style="display: none;"> - Post: "Mynamar pics."</font></li>
</ul>
</div>
<span>OUTPUT AREA:</span>
<div id="data"></div>

You can use something like this to parse links in the site:
$("a").each(function(i, o) {
console.log("Link: " + (i + 1));
console.log(" Text is: " + $(o).text());
console.log(" Link is: " + $(o).attr('href'));
})
Result:
www.mytarget.com=
https://www.myPage.com/lolPagess/?id=06
See JsFiddle

Check every href inside an a
$("a").each(function () {
isUrlValid($(this).attr("href"));
});
borrowed from Validating url with jQuery without the validate-plugin?:
function isUrlValid(url) {
return /^(https?|s?ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*#)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|#)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|#)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|#)|[\uE000-\uF8FF]|\/|\?)*)?(#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|#)|\/|\?)*)?$/i.test(url);
}
This regex will test for valid url's.

arrange dom order using jquery / javascript

<div id="grape">grape</div>
<div id="apple">apple</div>
<div id="orange">orange</div>
I have an array fruits = ['apple','grape','orange'], how to alter above dom according to the order of my array?

If you have a parent element
<div id="parent">
<div id="grape">grape</div>
<div id="apple">apple</div>
<div id="orange">orange</div>
</div>
then
var fruits = ['apple', 'grape', 'orange'];
jQuery(function () {
var $p = $('#parent');
$p.children().sort(function (a, b) {
return fruits.indexOf(a.id) - fruits.indexOf(b.id)
}).appendTo($p)
})
Demo: Fiddle

You can rebuild the content in order pretty easily:
HTML:
<button id="go">Sort</button>
<div id="fruits">
<div id="grape">grape</div>
<div id="apple">apple</div>
<div id="orange">orange</div>
</div>
Code:
var fruits = ['apple','grape','orange'];
$("#go").click(function() {
var container = $("#fruits");
container.empty();
fruits.forEach(function(item) {
container.append('<div id="' + item + '">' + item + '</div>');
});
});
Working demo: http://jsfiddle.net/jfriend00/muz9tzb6/
Or, you can use the fact that the array contains ID values to rearrange the existing elements like this:
var fruits = ['apple','grape','orange'];
$("#go").click(function() {
var parent = $("#fruits");
fruits.forEach(function(item) {
$("#" + item).appendTo(parent);
});
});
Working demo: http://jsfiddle.net/jfriend00/39kge2rw/

How to find the deepest child of a div with jquery

I'm trying to find the deepest element in the specified divwith jquery. But the code which used is producing the error TypeError: parent.children is not a function.
I found this code from this link
the code is :
function findDeepestChild(parent) {
var result = {depth: 0, element: parent};
parent.children().each( //Here I getting the error TypeError: parent.children is not a function
function(idx) {
var child = $(this);
var childResult = findDeepestChild(child);
if (childResult.depth + 1 > result.depth) {
result = {
depth: 1 + childResult.depth,
element: childResult.element};
}
}
);
return result;
}
---------------------------------------------------------------------------------------
$(document).on('keypress','#sendComment', function(e) {
if(e.keyCode==13){
var itemId=$('#findbefore').prev('.snew').attr('id');//
var item=findDeepestChild(itemId);
alert(item);
}
});
And my divs are :
<div id="S04" class="snew" style="display: block;">
<div class="author-image"></div>
<span>xyz shared the image xyz</span>
<div class="s-content">
<div class="s-message"></div>
<div class="shpicture">
<img class="SharedImage" width="100%" height="100%" data-shareid="1" data-alid="1" data-id="1" alt="xyz" src="data:image/jpeg;base64,">
</div>
</div>
</div>
<div class="SPcommentbox">
<div class="comment">
<div class="commenter-image"></div>
<div class="addcomment">
<input class="commentbox" type="text" placeholder="Write a comment...">
</div>
</div>
</div>
I need to find the img from these.
please anyone help me .... Thanks ...

To get the deepest nested elements, use
$("#" + parent).find("*").last().siblings().addBack()
http://jsfiddle.net/6ymUY/1/
you can then get the id data attribute with
item.data("id")
http://jsfiddle.net/6ymUY/2/
full code:
function findDeepestChild(parent) {
return $("#" + parent).find("*").last().siblings().addBack();
}
var item=findDeepestChild("S04");
console.log(item)
console.log(item.data("id"));

You're calling it with a string, but it's expecting a jQuery instance.
Instead of
var itemId=$('#findbefore').prev('.snew').attr('id');//
var item=findDeepestChild(itemId);
you probably want
var item=findDeepestChild($('#findbefore').prev('.snew'));

You are passing in itemId, which is the ID attribute of a given element. I think what you meant to pass was the element itself. Just remove the attr call, leaving this:
var item = findDeepestChild($("#findbefore").prev(".snew"));