We Keep Coding

Coded UI - C# - time itemprop tag - how to validate year exists

I received help from #dlatikay in a slightly different question yesterday, that helped me resolving false positive error partially. Here is the code snippet:
string countCurrentYearQA = (string)(window.ExecuteScript("count = 0; if(document.body.innerText.toString().indexOf('" + nowYearQAString + "') > -1){count = 1;} return count.toString();"));
string countPastYearQA = (string)(window.ExecuteScript("count = 0; if(document.body.innerText.toString().indexOf('" + pastYearQAString + "') > -1){count = 1;} return count.toString();"));
string countCurrentYearQAWithoutEndPipe = (string)(window.ExecuteScript("count = 0; if(document.body.innerText.toString().indexOf('" + nowYearQAStringWithoutPipe + "') > -1){count = 1;} return count.toString();"));
string countPastYearQAWithoutEndPipe = (string)(window.ExecuteScript("count = 0; if(document.body.innerText.toString().indexOf('" + pastYearQAStringWithoutPipe + "') > -1){count = 1;} return count.toString();"));
What is happening is that in most cases JavaScript is able to check whether any particular year exists or not. But there maybe a year mentioned in anywhere on the page, that may cause false positive test.
I'm seeking an example where I can execute JavaScript to target the time tag instead as it has the datetime value with itemprop="datePublished". I only need to check whether year matches. What is the way to get all itemprop values, extract only the year (4 digits), and if year matches with the year string I'm using in Execution Script (for example: nowYearQAString), then count returns 1, otherwise count returns 0. Is it possible to put all years in a list/array, that I can refer to using C# code? I will be thankful for any sample code that will direct me to the right direction.
Here is the snippet of the page I'm testing.
<time itemprop="datePublished" datetime="2018-03-08T11:00:00">March 8, 2018</time>
<time itemprop="datePublished" datetime="2017-12-07T12:40:00">December 7, 2017</time>
<time itemprop="datePublished" datetime="2017-11-23T10:00:00">November 23,
2017</time>
<time itemprop="datePublished" datetime="2017-10-13T09:00:00">October 13, 2017</time>
<time itemprop="datePublished" datetime="2017-09-16T00:00:00">September 16, 2017</time>
<time itemprop="datePublished" datetime="2017-08-25T00:00:00">August 25, 2017</time>
<time itemprop="datePublished" datetime="2017-08-17T11:00:00">August 17, 2017</time>
<time itemprop="datePublished" datetime="2017-07-25T00:00:00">July 25, 2017</time>
<time itemprop="datePublished" datetime="2017-05-23T00:00:00">May 23, 2017</time>
<time itemprop="datePublished" datetime="2017-05-12T15:00:00">May 12, 2017</time>

This should get you started. It will add the years to an array:
$(document).ready(function(){
var years = [];
$('time').each(function(){
var thisYear = $(this).attr('datetime').split('-')[0];
// do something with thisYear...
years.push(thisYear);
});
// Write all years to console window.
console.log(years);
});

Truncating or Summarizing Text with html part in HTML

Am loading some blog data from a database with title and body but the body contains some HTML and CSS codes like the following below in the JSON data
{[News_Body: "<span style=\"color: black;\">The Lagos State Local Government
Election Appeal Tribunal have received 22 Appeals from the July
22 council polls in Lagos State.<br />\n <br />\n The
Chairperson of the 2017 Local Government Election Appeal
Tribunal, Justice G. M Onyeabo, stated this today 25th of
October at the tribunal's inaugural sitting. <br />\n <br
/>\n The tribunal had earlier been inaugurated on the 23 of
October, 2017 pursuant to Section 7 of the Local Government
Election Tribunal Law 2008, will hear and determine the appeals
in 21 days.<br />\n <br />\n Justice Onyeabo and four other
justices: O. Kasali, A. Onigbanjo, O.A Dabiri and K. A Jose make
up the panel.<br />\n <br />"
News_Title: "PRESS RELEASE - LAGOS LG ELECTION APPEAL TRIBUNAL RECEIVES 22
APPEALS"
Posted_By: "Ololade Ige"
Posted_Date: "10/31/2017 12:00:00 AM"], ...}
The problem I have is taking the body and summarizing its contents. I tried the following but it did not work as expected.
using CSS
.truncate {
height: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Loading the data dynamically with javascript because it is coming from database
var p = document.createElement('p');
p.setAttribute('style', 'text-align:center; color: #ffffff !important;');
p.setAttribute('class', 'truncate');
var newSum = summary.split('<br />');;
p.innerHTML = newSum[0];
but the problem with the above is that not all object.News_Body contains a line break <br />. I don't have control as to how the data is stored, I just process what am given. Sadly :(

If jQuery is an option you could achieve something very quickly using the text function and some string manipulation.
var text = $("<div>" + content.News_Body + "</div>").text().substring(0, 3) + "..."
Just replace the 3 with your max content length. So substring(0, 10) will show 10 characters etc...
EDIT:
Using the link that #FMK posted at Strip HTML from Text JavaScript it would look like:
var text = strip("<div>" + content.News_Body + "</div>").substring(0, 3) + "..."
Which is a non-jquery option too.

I combined the two replies and I did this.
var p = document.createElement('p');
p.setAttribute('style', 'text-align:center; color: #ffffff !important;');
p.setAttribute('class', '');// removed my css truncate style class
var s = strip(summary).substring(0, 300) + "...";
p.innerHTML = s;
I got the strip function from Strip HTML from Text JavaScript
Thanks for the quick replies. You guys are awsome!!

Javascript copy to clipboard including html formatted text

I'm relatively new to js so would like some help,
I've got a form which is generated in php. I want the user to be able to click a button and copy the flight results to the clipboard,
I have the following javascript function:
<script>
function copyToClipboard(element) {
var $temp = $("<textarea>");
var brRegex = /<br\s*[\/]?>/gi;
$("body").append($temp);
$temp.val($(element).html().replace(brRegex, "\r\n")).select();
document.execCommand("copy");
$temp.remove();
}
</script>
However when you paste the result i get the following with the formatting tags visible:
<b>Mon 09 Oct - DY 7015 </b>
Depart: London Gatwick Airport, (LGW) at 17:05
Arrive: John F Kennedy Airport, New York (JFK) at 20:05
I want the result input to be
Mon 09 Oct - DY 7015
Depart: London Gatwick Airport, (LGW) at 17:05
Arrive: John F Kennedy Airport, New York (JFK) at 20:05
or if this is not possible easily, then at the very least display without formatting but also without the tags
Mon 09 Oct - DY 7015
Depart: London Gatwick Airport, (LGW) at 17:05
Arrive: John F Kennedy Airport, New York (JFK) at 20:05
Any ideas?

You can try this regex to remove your HTML tags: /<\/?[a-zA-Z]+\/?>/g
So, this should work :
$(element).html().replace(brRegex, "\r\n").replace(/<\/?[a-zA-Z]+\/?>/g, '')
Hope this helps!

How to break feed line according to page width?

I don't know exactly how to say that, I'll try to express myself here.
I have this feed url :
http://v2.afilio.com.br/aff/aff_boutique_show_ads.php?boutiqueid=37930-895835&currencypos=0&display_img=1&diplay_name=1&diplay_price=1&thumbsize=80%&truncate_desc=15&numrows=1&numcols=20&colorname=000000&colorprice=E30000&bkcolor=FFFFFF&bordercolor=FFFFFF&self_target=0&
It pulls out 15 items at once, it's like a store. The problem is that it won't break the line once it reaches the full width, on the other hand, it will just add a horizontal scroll bar at the bottom.
What I need to do is, instead of displaying the items like this:
|--- WIDTH 300px ---|
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15
I need to display them like this:
|--- WIDTH 300px ---|
01 02 03 04 05 06
07 08 09 10 11 12
13 14 15
Here is my code :
http://v2.afilio.com.br/aff/aff_boutique_show_ads.php?boutiqueid=37930-895843&currencypos=0&display_img=1&diplay_name=1&diplay_price=1&thumbsize=80%&truncate_desc=15&numrows=1&numcols=20&colorname=000000&colorprice=E30000&bkcolor=FFFFFF&bordercolor=FFFFFF&self_target=0&");
echo ($a);
?>
I also would like to know if it's possible to use javascript instead of php.

If you dont have access another api endpoint (eg one that produces json or xml), then you will have to parse the html to strip the unwanted cruft;
$xml = new DOMDocument();
#$xml->loadHTMLFile('http://v2.afilio.com.br/aff/aff_boutique_show_ads.php?boutiqueid=37930-895835&currencypos=0&display_img=1&diplay_name=1&diplay_price=1&thumbsize=80%&truncate_desc=15&numrows=1&numcols=20&colorname=000000&colorprice=E30000&bkcolor=FFFFFF&bordercolor=FFFFFF&self_target=0&');
$products = array();
//Loop through each <td> tag in the dom and extract inner html
foreach($xml->getElementsByTagName('td') as $p) {
$children = $p->childNodes;
$phtml = '';
foreach ($children as $child)
{
$phtml.= $p->ownerDocument->saveHTML($child);
}
echo '<div class="product">' . $phtml . '</div>';
}
Css
<style type="text/css">
.product{
width: 100px; float:left;
}
</style>

Javascript line break in string [duplicate]

This question already has answers here:
jQuery text() and newlines
(9 answers)
Closed 7 years ago.
How can i give a line break in the string text?
I want to give a line break in this line:
"Monday September 21 at 11:00am - September 24 at 12:00pm Pacific Time"
in the below code.
This is what I am doing.
<script>
$(document).ready(function() {
$('div.when ul.details p:contains("Sunday, September 20, 2015 - Thursday, September 24, 2015")').text('Monday September 21 at 11:00am - September 24 at 12:00pm Pacific Time ');
});
</script>

You can use .html() function and put <br> wherever you want line break.
$('div.when ul.details p:contains("Sunday, September 20, 2015 - Thursday, September 24, 2015")')
.html('Monday<br>September 21 at 11:00am - September 24 at 12:00pm Pacific Time ');
$(function() {
$('div')
.html('Monday<br>September 21 at 11:00am - September 24 at 12:00pm Pacific Time ');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
</div>