Javascript copy to clipboard including html formatted text - javascript

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!

Related

Javascript remove everything after colon except some words

I have address like this
"8 51209 Rge Rd 950 Road: Rural Parkland County House for sale : MLS®# E4125520"
What i want is I want to remove everything after : but keep Rural Parkland Country. so address becomes this
"8 51209 Rge Rd 950 Road Rural Parkland County"
Just to mention the address is dynamic and not static. i have e.g 10 posts having similar address.
Here is what i have
var splittitle = $(".listing-item-entry-title", this).html();
if (splittitle != null){
splittitle = splittitle.replace(/ *\:[^)]*\: */g, ": ");
$(".listing-item-entry-title", this).html(splittitle);
}
Thanks
You can simply split the string with the split(separator, limit) function and use the first part. Do something like this:
var address = "8 51209 Rge Rd 950 Road: Rural Parkland County House for sale : MLS®# E4125520";
var short_addresses = address.split(":", 2);
var short_address2 = short_addresses[1].split(" ", 4).join(' ');
document.getElementById("demo").innerHTML = short_address2;

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!!

xml data scraping more advanced than me [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Thanks for coming and understand I am new to this. So what seems easy to some is new to me.
I did some research on how to use javascript and/or php to pull data from an .xml file. I also can pull this .xml data into a mobile app using html5 canvas ( Construct 2 )
My issue is not related to nodes per se, But then again it is.
As it is easier if the node had text like this one.
<item>Hi There</item>
instead of subnodes like the one I wish to scrape.
<item game="powerball" nextjp="$67 Million" nextdd="Wednesday, August 10, 2016" winnum="20-33-36-47-52 PB12 X3" windd="Saturday, August 6, 2016" myflv="widget_pb.flv" winnumNM="20-33-36-47-52 PB12" name="POWERBALL">
I wish to break down the node so that it reads
Game
Next Jackpot
Next drawing
Winning Numbers
Game Played Date
It would have been easy for me if I could find an xml that already had the Nodes for each instead of all them inside one node. So with that said I don't need a full detailed script demo, I just need a basic overview of how it is done to get the subnode data. Thanks Jeremy C.
In this case I've loaded the entire XML from a string. In real case, you'll need to probably pull it using ajax.
Note: the URL you added in comments from which I got this xml from doesnt have 'Allow * Origin Header" so, ajax from there will create a CORS error.
var xml = '<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"><channel><title>Florida Lottery Winning Numbers</title><link>http://www.flalottery.com</link><description>Florida Lottery winning number drawing results for FLORIDA LOTTO, MEGA MILLIONS, POWERBALL, LUCKY MONEY, FANTASY 5, Midday and Evening PICK 2, PICK3, PICK 4 and PICK 5</description><item game="powerball" nextjp="$67 Million" nextdd="Wednesday, August 10, 2016" winnum="20-33-36-47-52 PB12 X3" windd="Saturday, August 6, 2016" myflv="widget_pb.flv" winnumNM="20-33-36-47-52 PB12" name="POWERBALL"><title>POWERBALL Drawing Results</title><link>http://www.flalottery.com/powerball.do</link><description>POWERBALL winning numbers are 20-33-36-47-52 PB12 X3 for 08/06/2016 and the next estimated Jackpot is $67 Million for 08/10/2016</description><pubDate>Wed, 10 Aug 2016 22:11:46 EST</pubDate><guid>http://www.flalottery.com/powerball.do</guid></item><item game="lotto" nextjp="$12 Million" nextdd="Wednesday, August 10, 2016" winnum="1-22-27-40-42-53 X3" windd="Saturday, August 6, 2016" myflv="widget_l6.flv" name="FLORIDA LOTTO"><title>FLORIDA LOTTO Drawing Results</title><link>http://www.flalottery.com/lotto.do</link><description>FLORIDA LOTTO with Xtra winning numbers are 1-22-27-40-42-53 X3 for 08/06/2016 and the next Jackpot is $12 Million for 08/10/2016</description><pubDate>Wed, 10 Aug 2016 22:11:46 EST</pubDate><guid>http://www.flalottery.com/lotto.do</guid></item><item game="fan5" winnum="3-23-25-33-34" windd="Tuesday, August 9, 2016" myflv="widget_f5.flv" name="FANTASY 5"><title>FANTASY 5 Drawing Results</title><link>http://www.flalottery.com/fantasy5.do</link><description>FANTASY 5 winning numbers are 3-23-25-33-34 for 08/09/2016</description><pubDate>Wed, 10 Aug 2016 22:11:46 EST</pubDate><guid>http://www.flalottery.com/fantasy5.do</guid></item><item game="pick5" winnumm="6-7-9-1-9" midd="Wednesday, August 10, 2016" winnume="4-7-1-9-1" eved="Wednesday, August 10, 2016" myflvm="NA" myflve="NA" name="PICK 5"><title>PICK 5 Drawing Results</title><link>http://www.flalottery.com/pick5.do</link><description>PICK 5 winning numbers are 6-7-9-1-9 for Midday 08/10/2016 and 4-7-1-9-1 for Evening 08/10/2016</description><pubDate>Wed, 10 Aug 2016 22:11:46 EST</pubDate><guid>http://www.flalottery.com/pick5.do</guid></item><item game="pick4" winnumm="3-6-4-7" midd="Wednesday, August 10, 2016" winnume="7-1-1-7" eved="Wednesday, August 10, 2016" myflvm="widget_p4_midd.flv" myflve="widget_p4_eved.flv" name="PICK 4"><title>PICK 4 Drawing Results</title><link>http://www.flalottery.com/pick4.do</link><description>PICK 4 winning numbers are 3-6-4-7 for Midday 08/10/2016 and 7-1-1-7 for Evening 08/10/2016</description><pubDate>Wed, 10 Aug 2016 22:11:46 EST</pubDate><guid>http://www.flalottery.com/pick4.do</guid></item><item game="pick3" winnumm="3-5-0" midd="Wednesday, August 10, 2016" winnume="2-4-8" eved="Wednesday, August 10, 2016" myflvm="widget_c3_midd.flv" myflve="widget_c3_eved.flv" name="PICK 3"><title>PICK 3 Drawing Results</title><link>http://www.flalottery.com/pick3.do</link><description>PICK 3 winning numbers are 3-5-0 for Midday 08/10/2016 and 2-4-8 for Evening 08/10/2016</description><pubDate>Wed, 10 Aug 2016 22:11:46 EST</pubDate><guid>http://www.flalottery.com/pick3.do</guid></item><item game="pick2" winnumm="9-6" midd="Wednesday, August 10, 2016" winnume="7-7" eved="Wednesday, August 10, 2016" myflvm="NA" myflve="NA" name="PICK 2"><title>PICK 2 Drawing Results</title><link>http://www.flalottery.com/pick2.do</link><description>PICK 2 winning numbers are 9-6 for Midday 08/10/2016 and 7-7 for Evening 08/10/2016</description><pubDate>Wed, 10 Aug 2016 22:11:46 EST</pubDate><guid>http://www.flalottery.com/pick2.do</guid></item><item game="megamillions" nextjp="$45 Million" nextdd="Friday, August 12, 2016" winnum="12-19-20-44-66 MM1 X5" windd="Tuesday, August 9, 2016" name="MEGA MILLIONS"><title>MEGA MILLIONS Drawing Results</title><link>http://www.flalottery.com/megaMillions.do</link><description>MEGA MILLIONS winning numbers are 12-19-20-44-66 MM1 X5 for 08/09/2016 and the next estimated Jackpot is $45 Million for 08/12/2016</description><pubDate>Wed, 10 Aug 2016 22:11:46 EST</pubDate><guid>http://www.flalottery.com/megaMillions.do</guid></item><item game="lucky" nextjp="$700,000" nextdd="Friday, August 12, 2016" winnum="1-11-27-39 LB3" windd="Tuesday, August 9, 2016" myflv="widget_lucky.flv" name="LUCKY MONEY"><title>LUCKY MONEY Drawing Results</title><link>http://www.flalottery.com/luckyMoney.do</link><description>LUCKY MONEY winning numbers are 1-11-27-39 LB3 for 08/09/2016 and the next Jackpot is $700,000 for 08/12/2016</description><pubDate>Wed, 10 Aug 2016 22:11:46 EST</pubDate><guid>http://www.flalottery.com/luckyMoney.do</guid></item></channel></rss>';
var xmlDoc = $.parseXML(xml),
$xml = $(xmlDoc),
$data = $xml.find("item");
var res = "";
$data.each(function() {
var str = "<tr>";
str += "<td>" + ($(this).attr('game')) + "</td>";
str += "<td>" + ($(this).attr('nextjp')) + "</td>";
str += "<td>" + ($(this).attr('nextdd')) + "</td>";
str += "<td>" + ($(this).attr('winnum')) + "</td>";
str += "<td>" + ($(this).attr('windd')) + "</td>";
str += "</tr>";
res += str;
});
$("#output").append(res);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="output" border="1">
<tr>
<th>Game</th>
<th>Next Jackpot</th>
<th>Next drawing</th>
<th>Winning Numbers</th>
<th>Game Played Date</th>
</tr>
</table>

How to format a timestamp in android Webview using javascript

I want to format a timestamp such as 1406270888 to Sunday, July 25, 2014 12:48:08 PM in a WebView on android device.
My Javascript code is as follows:
<script>
var chatTimestamp=parseInt(1406270888);
var date = new Date(chatTimestamp*1000);
var localTime =date.toLocaleDateString()+ " "+ date.toLocaleTimeString();
document.getElementById("demo").innerHTML = localTime;
</script>
But the output I get is as follows:
Sunday, July 25, 2014 12:48:08
So Basically AM PM is missing.
Source: http://www.w3schools.com/jsref/jsref_tolocaletimestring.asp
Any help is appreciated.
Thanks
Try this script
<script type="text/javascript">
var chatTimestamp=parseInt(1406270888);
var date = new Date(chatTimestamp*1000);
document.write(date.toString());
document.write(date.getFullYear()+'-'+date.getMonth()+'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()+':'+date.getSeconds());
</script>

ExtJS's XmlReader field mapping

I can't manage to get this Ext.data.XmlReader's CDATA field mapping to work.
<script>
var store = new Ext.data.Store({
url: '../data/data.xml',
// specify a XmlReader
reader: new Ext.data.XmlReader({
record: 'entry',
fields:[
{ name: 'field1', type: 'date', mapping:'field1'},
{ name: 'field2', type: 'string', mapping:'field2'}
]
}),
listeners:{load:function(store,recs)
{ //alert row1.field1 and row1.field2
var s = 'field1 = '+recs[0].get('field1') + '\nfield2 = '+recs[0].get('field2');
alert(s);
}
}
});
store.load();
</script>
And here's the XML contents in data.xml :
<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<entry>
<field1>01/01/2006</field1>
<field2>
<![CDATA[
<Comment>
Test
</Comment>
]]>
</field2>
</entry>
</feed>
When store finished loading . The alert (from the listener) shows some thing like this:
field1 = Sun Jan 01 2006 00:00:00 GMT+0700 (ICT)
field2 =
But I expected to see this :
field1 = Sun Jan 01 2006 00:00:00 GMT+0700 (ICT)
field2 = <Comment>
Test
</Comment>
These issue only happen in chrome and safari.it works with IE6.
How do I get the field2 node value (preferably, the solution works across major browsers),
any suggestion ?
Thanks in advance.
Owat
The <![CDATA[ start tag must start immediately after the XML tag with no space in between and the ]]> end tag must be followed immediately by the XML tag close, like this:
<field2><![CDATA[
<Comment>
Test
</Comment>
]]></field2>

Categories