I'm trying to access a page and get the value from this page.
First I don't have access to this page so I can't do any modification on the code, that's the problem because it doesn't look coded properly.
Please find an example (index.html) of the page (source)
I access this page with an ajax get method.
<div id="box" style="background-color:#000000; margin:0px;">
<b>
<big>
<span style="color:#00BB77;">Tue, 02-08-2016</span>
</big>
</b>
</div>
MobApp iOS.A in C04
<br>
09:00 am-11:00 am
<br>
<b>
<big></big>
</b>
<br>
MobApp Andr .A in C12
<br>
01:30 pm-03:30 pm
<br>
<b>
<big></big>
</b>
<br>
<div id="box" style="background-color:#000000; margin:0px;">
<b>
<big>
<span style="color:#00BB77;">Wed, 03-08-2016</span>
</big>
</b>
</div>
Adv. Studio 1.A in C11
<br>
01:30 pm-03:30 pm
<br>
<b>
<big></big>
</b>
<br>
<div id="box" style="background-color:#000000; margin:0px;">
.....etc....
I already wrote a sample of a code to get the value inside the span (the date) with:
$.ajax({
url: 'http://www.thewebsite.com/index.html',
type: 'GET',
success: function(res) {
var data = $.parseHTML(res);
$(data).find('#box').each(function() {
alert($(this).find('span').html());
});
}
});
And it works I get :
Tue, 02-08-2016
Wed, 03-08-2016 etc...
I would like now to get what's after the </div> and the <br> (The subject) and the (time)
As you can see sometimes it can be only one subject per day or more.
I know it would have been much easier if everything would have been inside proper div element but they coded their website long time ago and they won't change that.. 😞
I tried to get some of the value with next() or nextSibling.nodeValue() but without success.
So thanks in advance for a tip or a solution.
Cheers
You can do with javascript child node with below way:
var children= (document.getElementById("box")).childNodes;
var i=-1,length=children.length;
while(++i < length){
//chidrent text node will also come
console.log(children[i]);
}
$(data).find('#box') will return only first element with ID box because ID selectors are unique. So if you want to access all the elements with ID box use a class selector instead.
For eg: Use class="box"
<div class="box" style="background-color:#000000; margin:0px;">
Then
$.ajax({
url: 'http://www.thewebsite.com/index.html',
type: 'GET',
success: function(res) {
var data = $.parseHTML(res);
$(data).find('.box').each(function() {
var children = this.childNodes,
i = -1,
length = children.length;
while (++i < length) {
console.log(children[i]); // This will give you each child nodes of div with class box. You can extract the HTML contents of these child nodes here.
}
});
Related
This question already has answers here:
Find a string of text in an element and wrap some span tags round it
(6 answers)
Closed 6 years ago.
I've got a loot box div in which (sometimes) the name colorful comes in.
for example:
<div id="columns">
<div id="loot">
<b>
"Loot: Colorful blade "
<br>
" slot: weapon "
<br>
" value: 7"
</b>
...more and more and more
Now if the text in the loot div contains colorful I want to add a class to the text colorful . So I thought that if the text colorful is in it, it puts a <span> around the word colorful and asign a class to it. But I cant figure out how to do this.
I tried this (jsfiddle)
Your code targets the #loot element when trying to add the rainbow class, but does it target the desired div when looking for the text in the first place? (I dont think it does, but dunno since I dont jQuery)
Here's some code to do it sans jQuery:
var tgtElem = document.getElementById('loot');
var value = tgtElem.innerHTML;
value = value.replace('Colorful', '<span class="highlight">Colorful</span>');
tgtElem.innerHTML = value;
It relies upon a css rule, .highlight - set its styles as you wish.
Here's a fully worked example:
<!DOCTYPE html>
<html>
<head>
<script>
"use strict";
function byId(id){return document.getElementById(id);}
//////////////////////////////////////////////////////////////////////////////
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded()
{
var tgtElem = byId('loot');
var value = tgtElem.innerHTML;
value = value.replace('Colorful', '<span class="highlight">Colorful</span>');
tgtElem.innerHTML = value;
}
</script>
<style>
.highlight
{
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<div id="columns">
<div id="loot">
<b>
Loot: Colorful blade
<br>
slot: weapon
<br>
value: 7
</b>
<br />
<br />
<b>Current slot: weapon <br> Current weapon : Colorful blade <br> Current value: 7</b>
</div>
</div>
</body>
</html>
You need to link to the libary for the jQuery to work.
You can get it here https://code.jquery.com/
You were also correct with using the span around the word. Here is a working version
Loot: <span>Colorful</span> blade
Then target it to add the class
if ($('#loot:contains("Colorful")').length > 0) {
var str = document.getElementById("loot").innerHTML;
var res = str.replace("Colorful", "<span>Colorful</span>");
document.getElementById("loot").innerHTML = res;
$("#loot span").addClass("rainbow");
}
https://jsfiddle.net/o7phybe8/6/
I'am building a Chrome extension that parses the entire DOM/HTML and replace any found email(multiple emails) with the following div:
<div class="email_tmp"> found_email <span>SAVE EMAIL</span></div>
EXAMPLE:
<body>
<div>Some Text...</div>
<div>text a#a.com text</div>
<div>Some Text...</div>
<p>More Text</p>
<div><div><span>text b#b.com text</span></div></div>
<span>Last text</span>
</body>
replaced to:
<body>
<div>Some Text...</div>
<div>text <div class="email_tmp"> a#a.com <span>SAVE EMAIL</span></div> text</div>
<div>Some Text...</div>
<p>More Text</p>
<div><div><span>text <div class="email_tmp"> b#b.com <span>SAVE EMAIL</span></div> text</span></div></div>
<span>Last text</span>
</body>
How can I search and replace the found email by the entire div and the string found_email by the email too?
I want to replace only the found email(s) string, nothing more...
I really appreciate any help.
Here is the total solution for what your looking for
HTML
<div id="main">
sdfsdsdfsdfsdf a#a.com sdfsdfsdfsdfsdfsdf
</div>
JavaScript
var page_content = document.getElementById('main').innerHTML;
var found_email = "<div class='email_tmp'> found_email <span>SAVE EMAIL</span></div>";
//gives an array of the emails
var email = page_content.match(/([a-zA-Z0-9._-]+#[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/gi);
//replaces the emails to your desired content
var result = page_content.replace(email, found_email);
//replaces the changed HTML back to the 'main' div
document.getElementById('main').innerHTML = result;
Here is the Fiddle
Update:
If you want to replace only the text without adding any class or tags to the content of the HTML, then it gets real complicated to write a vanilla script for the same. In that case I would highly suggest you to use this library which I found to be the perfect solution for your problem.
Its a library called findAndReplaceDOMText which uses inbuilt methods to solve the purpose. You just need to give the find(what to find) and replace(replacing HTML) like so,
findAndReplaceDOMText(document.getElementById('t'), {
find: /([a-zA-Z0-9._-]+#[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/gi,
replace: '<div class='email_tmp'> found_email <span>SAVE EMAIL</span></div>'
});
You can obviously revert if you face any problems in implementing this library.
Also this a must read article for you - replacing-text-in-the-dom-solved
Slight update on #NikhilNanjappa 's original answer: my version is less efficient, but it will keep the actual email address and prepend the div and append the span and closing tags, based on the original answer.
var save_email_beg = "<div class='email_tmp'> ";
var save_email_end = " <span>SAVE EMAIL</span></div>";
var i = 0;
for (; i < email.length; i++) {
var new_string = save_email_beg + email[i] + save_email_end;
page_content = page_content.replace(email[i], new_string);
}
document.getElementById('main').innerHTML = page_content;
I'm trying to grab some text from an HTML element that is formed like this:
<td>
<br>
48 main Ave
<br>
Virginia, VA 23000
<br>
(800) 789-7898
</td>
The problem is keeping the format, or some sort of separation between the lines (it can be any sort of delimiter, but something to show the break). I can't simply use .text():
$('td').text()
// 48 main AveVirginia, VA 23000(800) 789-7898
Nor can I use .html() because there is actually a bunch of other junk in the .
Is there any other creative way I may be able to either keep the line break in OR place some sort of delimiter where the tag is?
Thanks!
EDIT: First off, you guys are awesome! Thanks for taking the time to respond, all of you.
I think using replace is the way to go. But I find once I've done that, I'm not able to grab the text any more. Here is my full code:
detailsArray = [];
$("tr[id*=Row]").each(function(index){
type = $(this).attr("type");
id = $(this).attr("idtag");
if (id){
$("div[detail*="+id+"] tr td").each(function(index){
var content = $(this).html();
content = content.replace(/<br>/g,'|');
$(this).replaceWith(content);
detailsArray
.push(type+', '+ $(this)
.text()
);
})
}
});
The problem is, the $(this).text() doesn't capture the change. So I tried breaking it out into two different portions, like so:
detailsArray = [];
$("tr[id*=Row]").each(function(index){
type = $(this).attr("type");
id = $(this).attr("idtag");
if (id){
//First we change it around
$("div[detail*="+id+"] tr td").each(function(index){
var content = $(this).html();
content = content.replace(/<br>/g,'|');
$(this).replaceWith(content);
}
//Then we grab it
$("div[detail*="+id+"] tr td").each(function(index){
detailsArray
.push(type+', '+ $(this)
.text()
);
})
}
});
I see the change happen on the page, but now the grab portion comes up empty. detailsArray = [].
So how can I use this? Thanks!
EDIT** Thought a better look at the html would help:
<div detail="27fdgd68_4_B_">
<table border="0" cellpadding="10" cellspacing="0" width="100%" class="size2">
<tbody>
<tr bgcolor="#FFF5CC">
<td>
<b>
<a target="_blank" href="" onclick="script()">Big Properties</a>
</b>
<a target="_blank" href="http://www.bigproperties.com"></a>
<br>
48 main Ave
<br>
Virginia, VA 23000
<br>
(800) 789-7898
</td>
</tr>
</tbody>
</table>
</div>
Again, the goal is to get the following text (assuming a '|' delimiter):
48 main Ave|Virginia, VA 23000|(800) 789-7898
Use replace()
Example of using it:
var content = $('myElement').html();
content = content.replace(/<br>/g,',');
To update html code use jQuery function replaceWith()
$(".yourDivClass").replaceWith(content);
var content = $("div").html();
content = content.replace(/<br>/g,',');
$("div").replaceWith(content);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<br/>
4884 Travertine Ave
<br/>
Virginia Beach, VA 23462
<br/>
(757) 605-5234
</div>
I think the separation is there but you cannot see it in the browser, otherwise this alert here would not show on separate lines.
alert($('td').text())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table><tr>
<td>
<br>
4884 Travertine Ave
<br>
Virginia Beach, VA 23462
<br>
(757) 605-5234
</td>
</tr>
</table>
You could do $('td').html.replace(/\<br>/g, '|')) to replace all the <br> tags with a pipe symbol (or any other delimiter you like).
Depending on how you plan to use the grabbed data, there can be more elegant solutions.
I have some (bad) HTML that I'm trying to scrape, which looks like this
<div class="MsoNormal" style="text-align: justify;">
<span style="font-family: Georgia,"Times New Roman",serif;">
<span style="color: #c00000;">"<i style="mso-bidi-font-style: normal;">Book Name</i>" by
<b style="mso-bidi-font-weight: normal;">AUTHOR</b>. Release Date:
<b style="mso-bidi-font-weight: normal;">DATE</b>. Published by
<b style="mso-bidi-font-weight: normal;">PUBLISHER</b>
</div>
I need to extract the three things in bold i.e AUTHOR,DATE & PUBLISHER
I've tried stuff like $('strong,b').each(...) but that gives the entire text.
Edit:
Here's the partial code I'm using, basically what I want to do is obtain all the details from a set of such divs.
$(".MsoNormal").each(function(index) {
var book = {}
var elem = $(this).text()
elem = sanitizeString(elem) // Removes whitespaces and line breaks
book["title"] = getTitle(elem) // Gets the book name, which is between double quotes
//Get author,date & publisher here $('b') traverses everything again
}
})
Use map function like in the example below. get method will return an array and then you have the freedom to do whatever you like with that information.
var text = $("b").map(function() {
return $(this).text();
}).get();
alert(text);
alert("Bold text: " + text.join(" "));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="MsoNormal" style="text-align: justify;">
<span style="font-family: Georgia,"Times New Roman",serif;">
<span style="color: #c00000;">"<i style="mso-bidi-font-style: normal;">Book Name</i>" by
<b style="mso-bidi-font-weight: normal;">AUTHOR</b>. Release Date:
<b style="mso-bidi-font-weight: normal;">DATE</b>. Published by
<b style="mso-bidi-font-weight: normal;">PUBLISHER</b>
</div>
Just use the $('b') selector:
$('b').each(function(index, element) {
console.log(element.textContent);
});
Or if you want to store them in an array you can use the .map method:
var bold_words = $('b').map(function() { return this.textContent });
console.log(bold_words);
// ["AUTHOR", "DATE", "PUBLISHER"]
I want to update a container with a new version without replacing it. For example:
Container1:
<div id="container-one">
<p>
<webview src="http://i.stack.imgur.com/Ed1aw.jpg"></webview>
</p>
<p>
Text
</p>
</div>
Container2:
<div id="container-two">
<p>
Cool intro
<webview src="http://i.stack.imgur.com/Ed1aw.jpg"></webview>
</p>
<p>
Long text
</p>
<p>
New Paragraph with text in it.
</p>
</div>
Container1 updated:
<div id="container-one">
<p>
Cool intro
<webview src="http://i.stack.imgur.com/Ed1aw.jpg"></webview>
</p>
<p>
Long text
</p>
<p>
New Paragraph with text in it.
</p>
</div>
A Container1.innerHTML = Container2.innerHTMLwould be simple but I don't want to reload my webview so the code should detect new divs or updated content in existing divs and apply the modifications in Container1.
UPDATE :
Container2 is a new version of container1 edited by a user, so Container2 can have anything in it: images, links, new paragraphs.
How can I do this?
I might have not understood your question correctly, but by adding an id to the text that you want to replace, and using simple javascript, you can achieve this.
HTML
<div id="container-one">
<p>
<span id="inner-one-1"></span>
<webview src="http://i.stack.imgur.com/Ed1aw.jpg"></webview>
</p>
<p>
<span id="inner-one-2">Text</span>
</p>
</div>
<div id="container-two">
<p>
<span id="inner-two-1">Cool intro</span>
<webview src="http://i.stack.imgur.com/Ed1aw.jpg"></webview>
</p>
<p>
<span id="inner-two-2">Long text</span>
</p>
</div>
<button id="click">Click Me!</button>
JS
document.getElementById("click").onclick = function() {
document.getElementById("inner-one-2").innerHTML = document.getElementById("inner-two-2").innerHTML;
document.getElementById("inner-one-1").innerHTML = document.getElementById("inner-two-1").innerHTML;
}
DEMO HERE
please try it.
var container_one = $("#container-one").children();
var container_two = $("#container-two").children();
$.each(container_one, function(index, element){
var cont_one_html = $(this).html();
var cont_two_html = $(container_two[index]).html();
if(cont_one_html != cont_two_html){
$(this).html(cont_two_html);
}
});
please have a look on image for more understanding.
you need to get the text node and replace the content, like
$('button').on('click', function () {
// this block is for not to update the webview
// get the first text node
var txt = $('#container-one > p:first').contents().first().get(0);
if (txt.nodeType === 3) { // Node.TEXT_NODE
txt.nodeValue = $('#container-two > p:first').text();
}
// update rest of the elements
$('#container-two').children().each(function (i) {
if (i !== 0 && $('#container-one').children()[i]) {
$($('#container-one').children()[i]).html($(this).html());
}
if (!$('#container-one').children()[i]) {
$('#container-one').append($(this).clone());
}
});
});
DEMO
Have a try and see if this works for you.
var first = $('container-one p:first');
first.html($('container-two p:first').html() + first.html());
$('container-one p:last').html($('container-two p:last').html());
Use this:
function update(s){
document.getElementById("container-one").innerHTML=s.innerHTML;
}
setInterval(function(){
update(document.getElementById("container-two"));
},1000);
What this does is it updates the content once every second.
To show that it can handle dynamic content, I have made the second div editable.
Demo:http://jsfiddle.net/5RLV2/2