I am trying to access links on a website. The website looks like the first code sample and the links are in different div-containers:
<div id="list">
<div class="class1">
<div class="item-class1">
example1
</div>
</div>
<div class="class2">
<div class="item-class2">
example2
</div>
</div>
</div>
I did tried to extract the links with this code:
var list = [];
$('div[id="list"]').find('a').each(function (index, element) {
list.push($(element).attr('href'));
});
But the outputs look like this:
0: "http://www.example.com/1"
1: "http://www.example.com/2"
But I want it to look like this:
0: example1
1: example2
Thank you very much.
$(element).attr('href') ==> get href property : the link
$(element).text() ==> get text
just change like this :
var list = [];
$('div[id="list"]').find('a').each(function (index, element) {
list.push($(element).text());
});
Related
#Example 1
<span class="levelone">
<span class="leveltwo" dir="auto">
::before
"Blue"
::after
</span>
</span>
#Example 2
<div class="itemlist">
<div dir="auto" style="text-align: start;">
"mobile"
</div>
</div>
#Example 3
<div class="quantity">
<div class="color">...</div>
<span class="num">10</span>
</div>
Hi, I am trying to use selenium to extract content from html. I managed to extract the content for example 1 & 2, the code that I have used is
example1 = driver.find_elements_by_css_selector("span[class='leveltwo']")
example2 = driver.find_elements_by_css_selector("div[class='itemlist']")
and printed out as text with
data = [dt.text for dt in example1]
print(data)
I got "Blue" for example 1 & "mobile" for example 2. For simplicity purposes, the html given above is for one iteration, I have scraped all elements with the class mentioned above
However, for the 3rd example, I tried to use
example3a = driver.find_elements_by_css_selector("div[class='quantity']")
and
example3b = driver.find_elements_by_css_selector("div[class='num']")
and
example3c = driver. find_element_by_class_name("num")
but all of it returned an empty list. I'm not sure is it because there is no dir in example 3? What method should I use to extract the "10"?
for 3rd example, you can try the below css :
div.quantity span.num
in code you can write like this :
example3a = driver.find_elements_by_css_selector("div.quantity span.num")
print(example3a.text)
or
print(example3a.get_attribute('innerHTML'))
To extract specifically the 10 you can use
example3a = driver.find_elements_by_css_selector("div.quantity span.num")
To extract both elements inside <div class="quantity"> you can use
example3 = driver.find_elements_by_xpath("//div[#class='quantity']//*")
for el in example3:
print(el.text)
I store an html string into var HTML, which I get using the following:
var HTML = $('.group').get(0).outerHTML;
The output of HTML using console.log(HTML) is:
<div class="group">
<div class="class1">
Data123...
</div>
<div class="class2">
<!--I want to insert text here -->
</div>
</div>
Now, I want to insert some text inside the div class="class2". I am using the following code:
$(HTML).find('.class2').text("Hello!");
But now the output of HTML using console.log(HTML) is the same old HTML as before. The text "Hello!" did not get inserted. Can anyone help with the solution.
Here is the complete code:
<div class="group">
<div class="class1">
Data123...
</div>
<div class="class2">
</div>
</div>
<script type="text/javascript">
var HTML = $('.group').get(0).outerHTML;
$(HTML).find('.class2').text("Hello!");
console.log(HTML);
</script>
You're updating a temporary DOM element, but that doesn't change the HTML string. You need to save the DOM elements in a variable.
var new_div = $(HTML);
new_div.find('.class2').text("Hello!");
console.log($(new_div).html());
I'm trying to find out a way to modify the HTML code to replace every Bootstrap col class name (col, col-xs-x, col-x etc.) by col-12 after the page is loaded.
I could do that with .removeClass('name') and then .addClass('name') but I need to use some RegEx because I want to modify Bootstrap col class names.
From something like this :
<body>
<div class="col-xs-6 col-sm-4 col-2"> Content 1 </div>
<div class="col"> Content 2 </div>
</body>
I want to modify to something like this :
<body>
<div class="col-12"> Content 1 </div> <!--can even be class="col-12 col-12 col-12"-->
<div class="col-12"> Content 2 </div>
</body>
I found here someone who did that with html().replace in jQuery so I tried to do the same but it doesn't work.
Way like this:
$(document).ready(function () { // my RegEx works well, verified it on regex101
let col_let_num = $('body').html().replace(/\bcol\b(\-[a-z]{0,2})?(\-)?([0-9]{0,2})?/i, 'col-12')
$('body').html(col_let_num)
})
So my question is, do you have any solution to change HTML content after the page is loaded ?
You forgot to add ')' to your Javascript.
but i really cant realize what you are trying to do here.
any way
$(document).ready(function () { // my RegEx works well, verified it on regex101
let col_let_num = $('body').html().replace(/\bcol\b(\-[a-z]{0,2})?(\-)?([0-9]{0,2})?/i, 'col-12')
$('body').html(col_let_num)
})
Edited
here you go
$('[class*="col"]').each((i, e) => {
let classes = $(e).attr('class').split(/\s+/);
classes.forEach(v => {
let col_let_num = v.replace(/\bcol\b(\-[a-z]{0,2})?(\-)?([0-9]{0,2})?/i, 'col-12')
$(e).attr('class', col_let_num)
})
})
this should work.
I was wondering if it was possible to create a sort of HTML object instead of copy pasting stuff, I thought of doing it via javascript but wondered if there was an easier way to do it (writing html in JS is a bit tedious).
Basically let's say a have a div like that:
<div class ="col">
<div class="Title">
Title
</div>
<div class="Text">
Text
</div>
</div>
Which is the best way, to have some sort of function where you can objectName.create(title, text) or to have a javascript function like Function(title, text) create the element?
You could take the outer element and clone it, change its content and append it back to where you want it. Be advised that this may duplicate ids if your elements should have one.
function createHtml(title, text) {
const el = document.querySelector('.col').cloneNode(true);
el.querySelector('.Title').innerText = title;
el.querySelector('.Text').innerText = text;
document.body.appendChild(el);
}
createHtml("Foo", "Bar");
<div class="col">
<div class="Title">
Title
</div>
<div class="Text">
Text
</div>
</div>
Another option would be to create the element from scratch
function createElement(title, text) {
const el = document.createElement('div');
el.clasName = 'col';
const titleDiv = document.createElement('div');
titleDiv.className = 'Title';
titleDiv.appendChild(document.createTextNode(title));
const textDiv = document.createElement('div');
textDiv.className = 'Text';
textDiv.appendChild(document.createTextNode(text));
el.appendChild(titleDiv);
el.appendChild(textDiv);
document.body.appendChild(el);
}
createElement("Foo", "Bar");
Note that there are many frameworks out there (like angular, react, vue, ...) that would do things like that easier/better.
It is not so bad to write html in js after template literals became a thing in js, you could do something like this
function addCol(title, text){
document.querySelector(".list").innerHTML += `
<div class="col">
<div class="Title">
${title}
</div>
<div class="Text">
${text}
</div>
</div>
`;
}
addCol("hello", "world");
addCol("foo", "bar");
<div class="list"></div>
I have a liking script that get ID from php and insert id to data base then the script shows the result by ID. I use same html code and same script for differents Ids but siledown result open on first div id instead of the ont that i click it:
HTML:
Like
<div id="sn_likebox">
<span id="close">X</span>
<div style="height:13px">
<div id="flash">Loading........</div>
</div>
<div id="sn_like_content">
</div>
</div>
<p>----------------------------------</p><div></div>
<p>-----------------------------------</p><div></div>
Like
<div id="sn_likebox">
<span id="close">X</span>
<div style="height:13px">
<div id="flash">Loading........</div>
</div>
<div id="sn_like_content">
</div>
</div>
Script:
$(".like").click(function()
{
var sta_id=$(this).attr("sta_id");
var username=$(this).attr("username");
var dataString ='sta_id='+ sta_id + '&username='+ username;
$("#sn_likebox").slideDown("slow");
$("#flash").fadeIn("slow");
$.ajax({
type : "POST",
url : us_cfg.url,
data: dataString,
cache: false,
success: function(html)
{
$("#flash").fadeOut("slow");
$("#sn_like_content").html(html);
}
});
});
$(".close").click(function()
{
$("#sn_likebox").slideUp("slow");
});
Demo:
http://jsfiddle.net/Ke5AB/112/
You can't place two elements with the same ID in the DOM. You need to make them unique, then your code will work with them.
You cannot have two identical IDs on the same page. Use a different selector type (such as a class).