Link to home
Start Free TrialLog in
Avatar of NEILPH
NEILPHFlag for New Zealand

asked on

How can I turn a Feedburner link into plain HTML using javascript?

I am putting an RSS feed from the WordPress blog environment onto my web page.

I have to do this by putting it through Feedburner, and within that through Buzzboost, to turn it into HTML.

I can't use PHP or Yahoo Pipes to put the feed on my page because they collapse the line and paragraph breaks. Only Buzzboost mantains these.

Unfortunately, if I give an individual WordPress blog post a headline\post title, that headline ends up on my webpage as a link rather than plain text, even after coming through Buzzboost.

The problem is that my page is intended for print only so I don't want links appearing on it. You can see the problem at my sample page http://www.isc.co.nz/feedflop.htm. I've disguised the "Martin Chuzzlewit" post headline decoration and colour but run your cursor over it and you'll see that it's a link.

A WordPress and CSS expert has said that I can't solve this with CSS (although Buzzboost uses a rich range of styles). He says its a job for javascript. Here is the Buzzboost javascript I put on my webpage to display my blog. Can I build on it to render blog post titles as plain bold HTML?

<script src="http://feeds.feedburner.com/co/KWjC?format=sigpro" type="text/javascript" ></script>
Avatar of coolersport
coolersport
Flag of Australia image

Put this at the end of your feedflop.htm page (just before </body> tag)

<script type="javascript">
document.getElementById('masterContainer').innerHTML = document.getElementById('masterContainer').innerHTML.replace(/<a [^>]+>(.+)<\/a>/gi, "$1");
</script>

Open in new window

Just to clarify. Replace 'masterContainer' with other element id if that is not the one you want.
Avatar of NEILPH

ASKER

No luck so far.  I included your script with masterContainer above the page </head>.

I'm using IE8 to develop. Another Expert  has just pointed out the IE8 Developer tools in answer to my open question 'why use Firefox instead of IE for development'.

The IE devtools show relevant structural elements in my page (see snippet). However, if you revisit  http://www.isc.co.nz/feedflop.htm you'll see that Martin Chuzzlewit is still a link. Or maybe you won't if you're using Firefox.

The Feedburner id shown by the IE devtools is interesting. I've never seen it before.


<script type="javascript">document.getElementById('masterContainer').innerHTML = document.getElementById('masterContainer').innerHTML.replace(/<a [^>]+>(.+)<\/a>/gi, "$1");</script>
</head>
 
<tr align="left" id="masterContainer" vAlign="top">
 
 
<div class="feedburnerFeedBlock" id="co/KWjC1vm81hdjbqf17st50tmuck1bbg">

Open in new window

I said before </body>, not before </head>. Try again and let me know :)
Actually, the proper code is as below.

<html>
<head>
<title>News</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<meta name="generator" content="BBEdit 7.1.4">
<style type="text/css">
 
p
{
	font-family: Times New Roman, Times, serif;  
	font-size: 12px;
	line-height: 115%;
	margin: 10px;
}
 
 
 
div.feedburnerFeedBlock {
margin-left:0;
}
 
div.snap_preview {
margin-left:0;
}
 
div.snap_preview p {
margin-left:0;
}
 
div.feedburnerFeedBlock ul {
margin-left:0;
padding-left:0;
list-style-type: none;
}
 
 
/* to control column width hide wordpress non-embedded youtube */
.vvqbox {
display: none;
}
 
 
a:link
{
display: none;
}
 
.headline a:link {
   text-decoration:none;
   color:#000000;
   display:inline;
}
 
 
</style> 
 
 
</head>
<body>
<table width="100%"border="0"cellspacing="0"cellpadding="0"name="holdit">
  <tr id="masterContainer"valign="top"align="left"> 
    <td width="33%"> 
      <p>From WordPress blog via feedburner buzzboost.<br>
        I want the post title "Martin Chuzzlewit" to appear at the top of this 
        post as ordinary HTML text not as a link.<br>
        Likewise for the one line post at the bottom has the title 'q'.</p>
      <p>At the same time I want any non-WordPress links to not show at all.<br>
        There is an ordinary link at the bottom of this page between A and B.<br>
        This should not show. <br>
      </p>
          
      <p>
        <script src="http://feeds.feedburner.com/co/KWjC?format=sigpro" type="text/javascript" ></script>
      </p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
	  <p>A&nbsp;<a href="http://www.isc.co.nz">ISC website</a>&nbsp;B</p>
    </td>
  </tr>
</table>
 
<script language="javascript">
<!--
document.getElementById('masterContainer').innerHTML = document.getElementById('masterContainer').innerHTML.replace(/<a [^>]+>(.+)<\/a>/gi, "$1");
-->
</script>
 
</body>
</html>

Open in new window

Avatar of NEILPH

ASKER

You can look at your code now at  http://www.isc.co.nz/feedflop.htm. For me Martin Chuzzlewit is still a link but maybe my browser is caching despite my best efforts.

 http://www.isc.co.nz/feedflop.htm is just a test page. My production page contains a lot more javascript within <head>...</head>. I'd prefer to put yours there but are you saying it must go within the <body>...</body>?
He puts the code before the </body> tag to make sure the element is created before you try to act upon it.

I prefer to create a function in the <head> section, see the code snippet below.

Ideally, you would change the CSS class for links using the "media" flag, styling links for print to show without text decoration:

a.plain { text-decoration: none; }

<script type="text/javascript">
//your good JavaScript here
 
function page_load() {
    var a = document.getElementById('masterContainer');
    a.innerHTML = a.innerHTML.replace(/<a [^>]+>(.+)<\/a>/gi, "$1");
}
 
window.onload = page_load;
</script>

Open in new window

Hi Neilph, your link still points to the old feedflop.htm which will not show any changes. For the sake of your example, putting it at the end of the html content should work. Why don't you show us your real situation so I can give you a better solution.

Badotz suggested one way to integrate the code into your existing page. If you already have a window.onload function, just insert the code inside your onload function.

The idea is just to make sure my code to run when everything finishes loading (feedburner finishes writing article content). By that time, it will strip all links out with ease.

Hope that help.

Cheers,
Tien
Avatar of NEILPH

ASKER

Hi coolersport and Badotz. I've just viewed the source of  http://www.isc.co.nz/feedflop.htm online and it is your [coolersport] new code that you posted here. I completely removed my old code and cut and pasted yours into the page and uploaded it. For me using IE8 "Martin Chuzzlewit" is still a link.

You're right, your code must wait until Feedburner has finished writing the article. That fact had slipped my mind.

The snippet below shows the real situation. You'll see there is a <body onload> that can be used. I haven't included your new javascript because the existing javascript is quite complex and you may have a better idea where to place it.

The existing javascript calls Yahoo Pipes to get RSS feeds. For this demonstration to you I have used it solely for the two test blogs I have created. The first one from the public WordPress site is appearing and demonstrates how the line and paragraph breaks collapse, which is why Feedburner must be used instead. The second test from my isc.co.nz blog isn't appearing for some reason. Don't worry. I must have the path wrong or something.

The rest of my existing javascript is used to limit images to one per source and to resize the permitted image. There is a setTimeout because, if I recall correctly, Yahoo Pipes delivers content too fast for my image-processing javascript to cope.



<html>
<head>
<title>Test</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<meta name="generator" content="BBEdit 7.1.4">
<style type="text/css">
 
p
{
font-family: Times New Roman, Times, serif;
font-size: 12px;
line-height: 115%;
margin: 10px;
}
div
{
	font-family: Times New Roman, Times, serif;
	font-size: 12px;
	line-height: 115%;
	margin: 0px;
}
 
a:link
{
display: none;
}
 
 
 
h1
{
	font-family: Times New Roman, Times, serif;
	font-size: 20px;
	font-weight: bold;
	margin: 10px;
}
 
 
 
</style>
<script type="text/javascript">
var puthere = new Array();
var count1 = 0;
var count2 = 0;
 
function getFeed(feed,div_id) {
if(feed.toString().indexOf('http')!=-1){
puthere[count1]=div_id;
count1++;
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'http://pipes.yahoo.com/pipes/pipe.run?_id=602dddd329a9ec7139334702e9785a76&_render=json&_callback=piper&feed='+feed;
document.getElementsByTagName("head")[0].appendChild(newScript);
}
}
 
function piper(feed) {
var tmp='';
for (var i=0; i<feed.value.items.length; i++) {
tmp+='<a href="'+feed.value.items[i].link+'">';
tmp+=feed.value.items[i].title+'</a><br>';
if (feed.value.items[i].description) {
tmp+=feed.value.items[i].description;
}
tmp+='<hr>';
}
document.getElementById(puthere[count2]).innerHTML=tmp;
count2++;
}
 
function getFeeds()
{
getFeed("http://iscreview.wordpress.com/feed/","p_source")
getFeed("http://www.isc.co.nz/blog/?p=24/","q_source")
 
setTimeout( 'init()', 2000 )
}
 
function init()
{
// attempt to get an array of references to the divs containing the images
var container = document.getElementsByTagName("div");
// make sure we have at least one div returned
if (container.length)
{
for( var j = 0, outerlimit = container.length; j < outerlimit; ++j)
{
var elemID = document.getElementsByTagName("div")[j].id;
if (elemID == "showonepic")
{
var cont_images = container[j].getElementsByTagName("img");
//make sure that at least one img element was returned
if (cont_images.length)
{
//iterate through the list
for( var i = 0, limit = cont_images.length; i < limit; ++i )
{
//"remove" every single image from the screen
cont_images[i].style.display='none';
}
// do the resizing while hidden
var new_width = 200;
var imagetoprocess = cont_images[0];
var old_width = imagetoprocess.width;
var old_height = imagetoprocess.height;
imagetoprocess.width = new_width;
imagetoprocess.height = Math.round(old_height * new_width / old_width);
//now "activate" ony the first image on the list
cont_images[0].style.display="";
}
}
}
}
}
</script>
</head>
<body onload="getFeeds()">
 
 
<table width="100%"border="0"cellspacing="0"cellpadding="0"name="holdit">
<tr id="masterContainer"valign="top"align="left">
<td width="33%">
 
 
<div id="noshowpic">
<h1><u>ISC WordPress blog via Yahoo Pipes</u></h1>
<div id='p_source' a:link="display: none;">
</div>
</div>
 
<p>&nbsp;<br><br></p>
 
<div id="noshowpic">
<h1><u>ISC own website blog via Yahoo Pipes</u></h1>
<div id='q_source' a:link="display: none;">
</div>
</div>
 
<p>&nbsp;<br><br></p>
<h1><u>ISC own website blog via Feedburner Buzzboost</u></h1>
 
<p>
        <script src="http://feeds.feedburner.com/co/KWjC?format=sigpro" type="text/javascript" ></script>
</p>
 
</td>
</tr>
</table>
</body>
</html>

Open in new window

So there is no way you can apply a CSS class to your links using "@media" for printing? I gotta think that is easier (better?) than artificially changing the link's behavior...
It is weird. The feedflop.htm remain no change at all. Anyway, please take a look at attached code for the modified version of your original page. Since you call getFeeds() on load, I inserted the function call to removeLinks(id) at the end of getFeeds(). Again, I tested it and it works like as expected.

Please let me know if you still have problem with it.

<html>
<head>
<title>Test</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<meta name="generator" content="BBEdit 7.1.4">
<style type="text/css">
 
p
{
font-family: Times New Roman, Times, serif;
font-size: 12px;
line-height: 115%;
margin: 10px;
}
div
{
	font-family: Times New Roman, Times, serif;
	font-size: 12px;
	line-height: 115%;
	margin: 0px;
}
 
a:link
{
display: none;
}
 
 
 
h1
{
	font-family: Times New Roman, Times, serif;
	font-size: 20px;
	font-weight: bold;
	margin: 10px;
}
 
 
 
</style>
<script type="text/javascript">
var puthere = new Array();
var count1 = 0;
var count2 = 0;
 
function getFeed(feed,div_id) {
if(feed.toString().indexOf('http')!=-1){
puthere[count1]=div_id;
count1++;
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'http://pipes.yahoo.com/pipes/pipe.run?_id=602dddd329a9ec7139334702e9785a76&_render=json&_callback=piper&feed='+feed;
document.getElementsByTagName("head")[0].appendChild(newScript);
}
}
 
function piper(feed) {
var tmp='';
for (var i=0; i<feed.value.items.length; i++) {
tmp+='<a href="'+feed.value.items[i].link+'">';
tmp+=feed.value.items[i].title+'</a><br>';
if (feed.value.items[i].description) {
tmp+=feed.value.items[i].description;
}
tmp+='<hr>';
}
document.getElementById(puthere[count2]).innerHTML=tmp;
count2++;
}
 
function removeLinks(id) {
var e = document.getElementById(id);
e.innerHTML = e.innerHTML.replace(/<a [^>]+>(.+)<\/a>/gi, "$1");
}
 
function getFeeds()
{
getFeed("http://iscreview.wordpress.com/feed/","p_source")
getFeed("http://www.isc.co.nz/blog/?p=24/","q_source")
 
setTimeout( 'init()', 2000 );
 
removeLinks('masterContainer');
}
 
function init()
{
// attempt to get an array of references to the divs containing the images
var container = document.getElementsByTagName("div");
// make sure we have at least one div returned
if (container.length)
{
for( var j = 0, outerlimit = container.length; j < outerlimit; ++j)
{
var elemID = document.getElementsByTagName("div")[j].id;
if (elemID == "showonepic")
{
var cont_images = container[j].getElementsByTagName("img");
//make sure that at least one img element was returned
if (cont_images.length)
{
//iterate through the list
for( var i = 0, limit = cont_images.length; i < limit; ++i )
{
//"remove" every single image from the screen
cont_images[i].style.display='none';
}
// do the resizing while hidden
var new_width = 200;
var imagetoprocess = cont_images[0];
var old_width = imagetoprocess.width;
var old_height = imagetoprocess.height;
imagetoprocess.width = new_width;
imagetoprocess.height = Math.round(old_height * new_width / old_width);
//now "activate" ony the first image on the list
cont_images[0].style.display="";
}
}
}
}
}
</script>
</head>
<body onload="getFeeds()">
 
 
<table width="100%"border="0"cellspacing="0"cellpadding="0"name="holdit">
<tr id="masterContainer"valign="top"align="left">
<td width="33%">
 
 
<div id="noshowpic">
<h1><u>ISC WordPress blog via Yahoo Pipes</u></h1>
<div id='p_source' a:link="display: none;">
</div>
</div>
 
<p>&nbsp;<br><br></p>
 
<div id="noshowpic">
<h1><u>ISC own website blog via Yahoo Pipes</u></h1>
<div id='q_source' a:link="display: none;">
</div>
</div>
 
<p>&nbsp;<br><br></p>
<h1><u>ISC own website blog via Feedburner Buzzboost</u></h1>
 
<p>
        <script src="http://feeds.feedburner.com/co/KWjC?format=sigpro" type="text/javascript" ></script>
</p>
 
</td>
</tr>
</table>
</body>
</html>

Open in new window

On side notes, Yahoo pipes can do almost everything regarding data processing. For your situation, Yahoo pipes can do everything without the need of feedburner. It needs advanced knowledge of regular expression though.

Cheers,
Tien
Avatar of NEILPH

ASKER

Tien, I've just republished  http://www.isc.co.nz/feedflop.htm with the previous code completely removed and your complete revised code pasted in. And the Chuzzlewit blog post title link still shows in my IE8 browser. Maybe yours will be OK. This is weird behaviour. I know we are considering increasing our storage at our ISP because we are slightly above our limit. The support guy there said there could be strange behaviour although he didn't seem concerned. Anyway, I've looked at the source online and it is your latest so surely the browser would display that.

Regarding using regular expressions to format Yahoo Pipes WordPress feeds, that sounds great. If I opened a new question could you help on this approach. I hate having to use Feedburner because in future we may have ordinary users sending us their blogs via RSS and I think they will find it difficult setting their blog up in Feedburner.

However, I'm surprised that Yahoo Pipes output could be tidied up to do the job. My endless googling research suggests that Feedburner is the widely-used approach. Also, I will be using Yahoo Pipes to get non-WordPress RSS feeds and I wouldn't want the regular expressions to muck them up.


Badotz, applying a CSS class to my links using "@media" for printing, is certainly an option. If I open a new question could you help me with it?


Thanks guys!
Aye, and many others far more qualified than I ;-)
Yes, IE has problem with modifying innerHTML on loading time. That's why it throws runtime error. I have modified the function removeLinks() a bit. It now removes all href attribute from links so "links without href become no links" :D

About Yahoo Pipes, if you open a new question, I will definitely help you on that. There will be others who are willing to do so too. Yahoo Pipes can do better than what you are thinking ;)

<html>
<head>
<title>Test</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<meta name="generator" content="BBEdit 7.1.4">
<style type="text/css">
 
p
{
font-family: Times New Roman, Times, serif;
font-size: 12px;
line-height: 115%;
margin: 10px;
}
div
{
	font-family: Times New Roman, Times, serif;
	font-size: 12px;
	line-height: 115%;
	margin: 0px;
}
 
a:link
{
display: none;
}
 
 
 
h1
{
	font-family: Times New Roman, Times, serif;
	font-size: 20px;
	font-weight: bold;
	margin: 10px;
}
 
 
 
</style>
<script type="text/javascript">
var puthere = new Array();
var count1 = 0;
var count2 = 0;
 
function getFeed(feed,div_id) {
if(feed.toString().indexOf('http')!=-1){
puthere[count1]=div_id;
count1++;
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'http://pipes.yahoo.com/pipes/pipe.run?_id=602dddd329a9ec7139334702e9785a76&_render=json&_callback=piper&feed='+feed;
document.getElementsByTagName("head")[0].appendChild(newScript);
}
}
 
function piper(feed) {
var tmp='';
for (var i=0; i<feed.value.items.length; i++) {
tmp+='<a href="'+feed.value.items[i].link+'">';
tmp+=feed.value.items[i].title+'</a><br>';
if (feed.value.items[i].description) {
tmp+=feed.value.items[i].description;
}
tmp+='<hr>';
}
document.getElementById(puthere[count2]).innerHTML=tmp;
count2++;
}
 
function removeLinks(id) {
var e = document.getElementById(id).getElementsByTagName('A');
for (i = 0; i<e.length; i++) {
	e[i].removeAttribute('href');
}
//e.innerHTML = e.innerHTML.replace(/<a [^>]+>(.+)<\/a>/gi, "$1");
}
 
function getFeeds()
{
getFeed("http://iscreview.wordpress.com/feed/","p_source")
getFeed("http://www.isc.co.nz/blog/?p=24/","q_source")
 
setTimeout( 'init()', 2000 );
 
removeLinks('masterContainer');
}
 
function init()
{
// attempt to get an array of references to the divs containing the images
var container = document.getElementsByTagName("div");
// make sure we have at least one div returned
if (container.length)
{
for( var j = 0, outerlimit = container.length; j < outerlimit; ++j)
{
var elemID = document.getElementsByTagName("div")[j].id;
if (elemID == "showonepic")
{
var cont_images = container[j].getElementsByTagName("img");
//make sure that at least one img element was returned
if (cont_images.length)
{
//iterate through the list
for( var i = 0, limit = cont_images.length; i < limit; ++i )
{
//"remove" every single image from the screen
cont_images[i].style.display='none';
}
// do the resizing while hidden
var new_width = 200;
var imagetoprocess = cont_images[0];
var old_width = imagetoprocess.width;
var old_height = imagetoprocess.height;
imagetoprocess.width = new_width;
imagetoprocess.height = Math.round(old_height * new_width / old_width);
//now "activate" ony the first image on the list
cont_images[0].style.display="";
}
}
}
}
}
</script>
</head>
<body onload="getFeeds()">
 
 
<table width="100%"border="0"cellspacing="0"cellpadding="0"name="holdit">
<tr id="masterContainer"valign="top"align="left">
<td width="33%">
 
 
 
<div id="noshowpic">
        <h1><u>WordPress blog via Yahoo Pipes</u></h1>
<div id='p_source' a:link="display: none;">
</div>
</div>
 
<p>&nbsp;<br><br></p>
 
<div id="noshowpic">
<h1><u>ISC own website blog via Yahoo Pipes</u></h1>
<div id='q_source' a:link="display: none;">
</div>
</div>
 
 
<p>&nbsp;<br><br></p>
<h1><u>ISC own website blog via Feedburner Buzzboost</u></h1>
 
<p>
        <script src="http://feeds.feedburner.com/co/KWjC?format=sigpro" type="text/javascript" ></script>
</p>
 
</td>
</tr>
</table>
</body>
</html>

Open in new window

Avatar of NEILPH

ASKER

Tien
Your latest tweak now makes  http://www.isc.co.nz/feedflop.htm work fine in IE8. Presumably it will in IE6, 7 and FF. Good work - and I think the solution to the problem.

I'm tempted to take up your offer to explore maintaining blog line\paragraph breaks via Pipes instead of Feedburner, so my users won't have to wrestle with putting their blogs through Feedburner. However, we also intend to use rss2html as a PHP alternative to Pipes in case Yahoo ever close down pipes. When we put Wordpress blogs through PHP we get the same blog vanishing line\paragraph break problem.

So, I think your current javascript solution is best (unless of course you think you could suggest a set of regular expressions that I could apply to both Pipes and PHP output to retain WordPress line\para breaks without interfering with other incoming RSS feeds).

Badotz, on reflection I realise that using "@media" isn't going to get me anywhere. The problem isn't so much in the printed output. I can use CSS to remove the decoration there. The problem is that when the user sees the page on-screen before printing they would have seen the link and might have clicked it. I had previously asked a CSS expert and he said he thought javascript was the way around this.

I'd like to close this question accepting coolersport's javascript. Would you both be happy if I split the points with 75% to coolersport for the solution and 25% to badotz for the useful contributions?
ASKER CERTIFIED SOLUTION
Avatar of coolersport
coolersport
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of NEILPH

ASKER

Thanks Tiens. I'll think over whether to pursue formatting the blog via Pipes. I'd love to do it if it worked for PHP too.

I'll close this when Badotz replies.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of NEILPH

ASKER

I've split the points coolersport400/Badotz100. Thanks guys.
Avatar of NEILPH

ASKER

Tien

Would it be possible to modify your function removeLinks(id) script so that the resulting text is bold? Maybe this could be achieved by wrapping the resulting text in <b>...</b> or say <h4>...</h4> where I have a CSS style like...
h4
{
      font-family: Times New Roman, Times, serif;
      font-size: 12px;
      font-weight: bold;
      margin: 10px;
}

I'm happy to open a new question for you to answer this.  Regards





function removeLinks(id) {
var e = document.getElementById(id).getElementsByTagName('A');
for (i = 0; i<e.length; i++) {
	e[i].removeAttribute('href');
}
//e.innerHTML = e.innerHTML.replace(/<a [^>]+>(.+)<\/a>/gi, "$1");
}

Open in new window