This is my html page.
<body>
<div id="form1">
<root xmlns:NS='www.yembi.com'>
<NS:ENTRY Action='Users'>
<div class="colm1">
<NS:DISPLAY datafield="FirstName"></NS:DISPLAY>
</div>
<div class="colm2">
<NS:Text datafield='FirstName'/>
</div>
<div class="colm1">
<NS:DISPLAY datafield="MiddleName"></NS:DISPLAY>
</div>
<div class="colm2">
<NS:Text datafield='MiddleName'/>
</div>
<div class="colm1">
<NS:DISPLAY datafield="LastName"></NS:DISPLAY>
</div>
<div class="colm2">
<NS:Text datafield='LastName'/>
</div>
<div class="colm1">
<NS:DISPLAY datafield="Phone"></NS:DISPLAY>
</div>
<div class="colm2">
<NS:Text datafield='Phone'/>
</div>
<div class="colm3">
<NS:BUTTON ></NS:BUTTON>
</div>
</NS:ENTRY>
</root>
</div>
I wanna get this html into a temp variable. so tried like below
var Text = $("#form1").html();
I am getting full html content, But with small exceptions.
It not displaying the double quotes in div attributes.
I am getting the below output:
<ROOT xmlns:NS='www.yembi.com'>
<NS:ENTRY Action='Users'>
<DIV class=colm1>
<NS:DISPLAY datafield="FirstName"></NS:DISPLAY>
</DIV>
<DIV class=colm2> // Here it automatically removes the double quotes. how to retain this double quotes ?
<NS:Text datafield='FirstName'/>
</DIV>
<DIV class=colm1>
<NS:DISPLAY datafield="MiddleName"></NS:DISPLAY>
</DIV>
<DIV class=colm2>
<NS:Text datafield='MiddleName'/>
</div>
<DIV class=colm1>
<NS:DISPLAY datafield="LastName"></NS:DISPLAY>
</DIV>
<DIV class=colm2>
<NS:Text datafield='LastName'/>
</DIV>
<DIVclass=colm1>
<NS:DISPLAY datafield="Phone"></NS:DISPLAY>
</DIV>
<DIV class=colm2>
<NS:Text datafield='Phone'/>
</DIV>
<DIV class=colm3>
<NS:BUTTON ></NS:BUTTON>
</DIV>
</NS:ENTRY>
</ROOT>
As mentioned above it automatically remove the double quotes in DIV. How to retain this double quotes??
I suspect you are using jQuery or an equivalent:
See here from the documentation:
"This method uses the browser's innerHTML property. Some browsers may not return HTML that exactly replicates the HTML source in an original document. For example, Internet Explorer sometimes leaves off the quotes around attribute values if they contain only alphanumeric characters."
http://api.jquery.com/html/
So this is really browser dependent. You could use a javascript regex to make sure the quotes are where you need them to be:
Regex to put quotes for html attributes
Related
In the following HTML code I need to extract class="list-item-child-label ng-inserted" but only in that part where I have class="fat-checkbox-checked"
<fat-option class="fat-option>
<fat-pseudo-checkbox class="fat-pseudo-checkbox ></fat-pseudo-checkbox>
<span class="fat-option-text">
<div class="justify-content">
<div class="align-items">
<fat-checkbox class="fat-checkbox-checked">
</fat-checkbox>
<div></div>
<div class="list-item-child-label"> TEXT AAA </div>
</div>
<div class="list-item-child-label ng-inserted"> TEXT BBB </div>
</div>
</span>
</fat-option>
<fat-option class="fat-option>
<fat-pseudo-checkbox class="fat-pseudo-checkbox ></fat-pseudo-checkbox>
<span class="fat-option-text">
<div class="justify-content">
<div class="align-items">
<fat-checkbox class="fat-checkbox">
</fat-checkbox>
<div></div>
<div class="list-item-child-label"> TEXT AAA </div>
</div>
<div class="list-item-child-label ng-inserted"> TEXT BBB </div>
</div>
</span>
</fat-option>
These xpaths that I tried to build:
'//div[contains(#class, "list-item-child-label ng-inserted")]/ancestor::span//div//fat-checkbox[contains(#class, "mat-checkbox-checked")]'
'//span//div//fat-checkbox[contains(#class, "fat-checkbox-checked")]/following-sibling::div[2]'
'//span//div//fat-checkbox[contains(#class, "fat-checkbox-checked")]/following-sibling::div[contains(#class, "list-item-child-label ng-inserted")]'
getting me only class="list-item-child-label"
Anyone knows how to build correct xpath to get class="list-item-child-label ng-inserted" with class="fat-checkbox-checked" without using contains(#text)?
Try below XPath to select required node
//div[fat-checkbox[#class="fat-checkbox-checked"]]/following-sibling::div[#class="list-item-child-label ng-inserted"]
To locate the element <div class="list-item-child-label ng-inserted"> followed by the element <fat-checkbox class="fat-checkbox-checked"> you can use either of the following xpath:
//fat-checkbox[#class='fat-checkbox-checked']//following::div[#class='list-item-child-label ng-inserted']
I'm trying to make my first Tampermoney script
Here's an example of an html page :
<div class="a">
<div class="b">
"Hello world"
</div>
<div class="n">
"Test"
</div>
</div>
<div class="a">
<div class="d">
<div class="e">
...
<div class="n">
"Hello world"
</div>
</div>
</div>
</div>
I found this topic, very interesting, but I'm not able to make it fits my requirements : Hiding div that contains specific string
I would like to hide the divs class="a" ONLY if it contains a div class="n" that contains the text "Hello world".
Do I need to loop on all the divs class="a", to seek for a class="n" containing "Hello world" ? I'll need some help please...
<div class="a">
<div class="b">
"Hello world"
</div>
<div class="n">
"Test"
</div>
</div>
Hmmmm, I think it needs a few ajustements...
Here's my code :
$(window).load(function(){
$('._5g-l:contains("Publication suggérée")').closest('._5jmm _5pat _3lb4 m_95yeui-j _x72').hide();
});
The web page :
And the associated code :
<div data-fte="1" data-ftr="1" class="_5jmm _5pat _3lb4 m_95yeui-j _x72" id="hyperfeed_story_id_581d0a6f0b12a3832990101" data-testid="fbfeed_story" [...]>
<div class="_4-u2 mbm _5v3q _4-u8" id="u_jsonp_2_1f">
<div class="_3ccb _4-u8" [...]>
<div></div>
<div class="userContentWrapper _5pcr" role="article" aria-label="Actualité">
<div class="_1dwg _1w_m">
<div class="_5g-l"><span>Publication suggérée</span></div>
[...]
Also, I can't put in the webpage :
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
When I try to execute the commande in the console :
$('._5g-l:contains("Publication suggérée")').closest('._5jmm _5pat _3lb4 m_95yeui-j _x72').hide();
(unknown) Uncaught Error: <![EX[["Tried to get element with id of \"%s\" but it is not present on the page.","._5g-l:contains(\"Publication suggérée\")"]]]>
at h (https://www.facebook.com/rsrc.php/v3/yZ/r/AveNRnydIl_.js:36:166)
at i (https://www.facebook.com/rsrc.php/v3/yZ/r/AveNRnydIl_.js:36:293)
at <anonymous>:1:1
I think this will help you. And you want if class .a contain .n with text("hello world") , .a need to be hide. I just make edit your HTML part and also comment out which div will be hide. According to your HTML first one will be not hide because .n contain "test".
if any question or if you found anything wrong on my answer ask me. :) Live On Fiddle
UPDATE: In your Code the problem in your parent div you have 5 class _5jmm, _5pat, _3lb4, m_95yeui-j, _x72 but you write in jQuery closest('.5jmm _5pat _3lb4 m_95yeui-j _x72').hide(). So you can set only one class which is closest. And you don't
$(window).on('load', function() {
$('._5g-l:contains("Publication suggérée")').closest('._5jmm').hide();
});
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<div data-fte="1" data-ftr="1" class="_5jmm _5pat _3lb4 m_95yeui-j _x72" id="hyperfeed_story_id_581d0a6f0b12a3832990101" data-testid="fbfeed_story" [...]>
<div class="_4-u2 mbm _5v3q _4-u8" id="u_jsonp_2_1f">
<div class="_3ccb _4-u8" [...]>
<div></div>
<div class="userContentWrapper _5pcr" role="article" aria-label="Actualité">
<div class="_1dwg _1w_m">
<div class="_5g-l"><span>Publication suggérée</span></div>
</div>
</div>
</div>
</div>
</div>
I have this code that is getting data from a cell in a table
<div class="p-s-header">TITLE</div>
<div class="p-content">
<div class="row">
<div class="col-md-12 col-xs-12 col-sm-12">
<span di="76" ></span><br />
<span di="77" ></span><br />
</div>
</div>
</div>
This is producing:
TITLE
(data in cell 76)
(DATA in cell 77)
Now, data in cell 77 is a a link that is too long for the space, so I want to add the work "Click here" (hyperlinked) instead of showing the link.
So I wanted to change code, so output looks like:
TITLE
(data in cell 76)
Click here
"Click here" shoudl be built with the data in cell 77. I didn't code this but it seems the code to get the data from that cell is:
How would I build it?
I tried a few options, but nothing seems to work:
For example something like this:
<a href=<span di="77" ></span>Link</a><br />
thanks for your help
Try this, I hope this will encourage you on studying further how HTML and JS work together. (PHP is too advanced right now).
Change your code for this:
<div class="p-s-header">TITLE</div>
<div class="p-content">
<div class="row">
<div class="col-md-12 col-xs-12 col-sm-12">
<span id="cell76" ></span><br />
<span id="cell77" >http://www.google.com</span><br />
</div>
</div>
</div>
The attribute di doesn't exist, it is id and id's cannot start with numbers or be numbers
At the bottom of the code that you added write the following:
<script>
var link = document.getElementById('cell77').innerHTML;
document.write(''+link+'');
</script>
Here is the jsfiddle
https://jsfiddle.net/cz1Ltw3x/1/
Below I have a for-each loop using knockout.js.
<div data-bind="foreach:Stuff">
<div class="row">
<span data-bind="text: $data.name"></span>
</div>
</div>
I need to have the HTML Element with an id or name or something that reflects a unique value related to the $data.name value, as another method runs asynchronously, and needs to know which HTML element to update.
Ideally, it would look something like this, I guess:
<div data-bind="foreach:Stuff">
<div class="row">
<span id="data-bind='text: $data.name'" data-bind="text: $data.name"></span>
</div>
</div>
I have found a knockout syntax that applies values during runtime to specified attributes:
<div data-bind="foreach:Stuff">
<div class="row">
<span data-bind="attr: { id: $data.name}"></span>
</div>
</div>
Are you looking for this
<div data-bind="foreach:Stuff">
<div class="row">
<span data-bind="text: $data.name,attr:{id:$data.name}'"></span>
</div>
</div>
Here name is a observable i believe when ever there is change in name in stuff it will automatically updates its value & attr:{id}just to give a dynamic id to element using available bindings .
I have the following html code on the page received by mechanize (agent.get):
<div class="b-resumehistorylist-views">
<!-- first date start-->
<div class="b-resumehistory-date">date1</div>
<div class="b-resumehistory-company">
<div class="b-resumehistory-time">time1</div>
company1</div>
<!-- second date start -->
<div class="b-resumehistory-date">date2</div>
<div class="b-resumehistory-company">
<div class="b-resumehistory-time">time2</div>
company2
</div>
<div class="b-resumehistory-company">
<div class="b-resumehistory-time">time3</div>
company3</div>
<div class="b-resumehistory-company">
<div class="b-resumehistory-time">time4</div>
company4</div>
<div class="b-resumehistory-company">
<div class="b-resumehistory-time">time5</div>
company5</div>
<div class="b-resumehistory-company">
<div class="b-resumehistory-time">time6</div>
company6</div>
<div class="b-resumehistory-company">
<div class="b-resumehistory-time">time7</div>
company7</div>
...
</div>
I need to search inside the div with class="b-resumehistorylist-views" each date.
Then find all divs between two div-dates and link each item to this particular date.
The problem is that each item (div class = b-resumehistorylist-views) is not inside div=b-resumehistorylist-views.
At final stage I need to receive the following array:
array = [ [date1, time1, company1, companylink1], [date2, time2, company2, companylink2], [date2, time3, company3, companylink3],[date2, time4, company4, companylink4] ]
I know that I must use method search with text() option, but I cannot find the solution.
My code right now can parse all companies information between div class=b-resumehistory-company, but I need to find right date.
It would be the same thing as before, just some of the class attributes have been changed:
doc = agent.get(someurl).parser
doc.css('.b-resumehistory-company').map{|x| [x.at('./preceding-sibling::div[#class="b-resumehistory-date"][1]').text , x.at('.b-resumehistory-time').text, x.at('a').text, x.at('a')[:href]]}