By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,905 Members | 900 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,905 IT Pros & Developers. It's quick & easy.

Greasemonkey: Trying to replace LJ's YouTube placeholders with a link.

XtinaS
P: 3
I'm trying to write a script for Greasemonkey that will, in LiveJournal, replace a placeholdered embedded YouTube thing with a link to the video. In LiveJournal, you can set an option to have a placeholder instead of the actual embedded YouTube video. This is what that code looks like:

Expand|Select|Wrap|Line Numbers
  1. <div class="LJ_Placeholder_Container" style="width: 475px; height: 405px;">
  2.     <div class="LJ_Placeholder_HTML" style="display: none;">%3C%69%66%72%61%6D%65%20%73%72%63%3D%22%68%74%74%70%3A%2F%2F%6C%6A%2D%74%6F%79%73%2E%63%6F%6D%2F%3F%6A%6F%75%72%6E%61%6C%69%64%3D%31%32%37%37%36%36%26%6D%6F%64%75%6C%65%69%64%3D%34%26%61%75%74%68%5F%74%6F%6B%65%6E%3D%73%65%73%73%69%6F%6E%6C%65%73%73%3A%31%31%39%38%36%39%39%32%30%30%3A%65%6D%62%65%64%63%6F%6E%74%65%6E%74%3A%31%32%37%37%36%36%25%32%36%34%3A%65%30%30%65%62%30%33%63%32%32%32%33%31%65%30%30%64%65%61%39%33%39%32%37%65%61%37%62%65%62%36%35%35%31%33%33%30%38%38%39%22%20%77%69%64%74%68%3D%22%34%37%35%22%20%68%65%69%67%68%74%3D%22%34%30%35%22%20%61%6C%6C%6F%77%74%72%61%6E%73%70%61%72%65%6E%63%79%3D%22%74%72%75%65%22%20%66%72%61%6D%65%62%6F%72%64%65%72%3D%22%30%22%20%63%6C%61%73%73%3D%22%6C%6A%5F%65%6D%62%65%64%63%6F%6E%74%65%6E%74%22%20%6E%61%6D%65%3D%22%65%6D%62%65%64%5F%31%32%37%37%36%36%5F%34%22%3E%3C%2F%69%66%72%61%6D%65%3E</div>
  3.     <div class="LJ_Container"></div>
  4.     <a href="" onclick="return false;">
  5.         <img src="http://stat.livejournal.com/img/videoplaceholder.png" class="LJ_Placeholder" title="Click to show embedded content" />
  6.     </a>
  7. </div>
  8.  
That pile of hex turns into this iframe element:

Expand|Select|Wrap|Line Numbers
  1. <iframe src="http://lj-toys.com/?journalid=711176&moduleid=8&auth_token=sessionless:1198684800:embedcontent:711176%268:6d73c68d2e1e81bc3055dafe2c66a79ebd101129" width="475" height="405" allowtransparency="true" frameborder="0" class="lj_embedcontent" name="embed_711176_8"></iframe>
  2.  
(I don't know why it points to lj-toys.com. That's some LJ thing I don't know.)

I want to replace that code block (node?) with just the link. I can do it in normal Javascript, if I hard-code the string:

Expand|Select|Wrap|Line Numbers
  1. var afts, befs, news;
  2.  
  3. befs = "<div class='LJ_Placeholder_HTML' style='display: none;'>%3C%69%66%72%61%6D%65%20%73%72%63%3D%22%68%74%74%70%3A%2F%2F%6C%6A%2D%74%6F%79%73%2E%63%6F%6D%2F%3F%6A%6F%75%72%6E%61%6C%69%64%3D%31%32%37%37%36%36%26%6D%6F%64%75%6C%65%69%64%3D%33%26%61%75%74%68%5F%74%6F%6B%65%6E%3D%73%65%73%73%69%6F%6E%6C%65%73%73%3A%31%31%39%38%36%39%39%32%30%30%3A%65%6D%62%65%64%63%6F%6E%74%65%6E%74%3A%31%32%37%37%36%36%25%32%36%33%3A%37%63%63%62%63%64%64%30%30%63%38%31%66%61%35%32%66%61%66%63%66%33%65%36%38%37%65%63%36%34%64%64%65%34%66%36%39%39%37%31%22%20%77%69%64%74%68%3D%22%34%37%35%22%20%68%65%69%67%68%74%3D%22%34%30%35%22%20%61%6C%6C%6F%77%74%72%61%6E%73%70%61%72%65%6E%63%79%3D%22%74%72%75%65%22%20%66%72%61%6D%65%62%6F%72%64%65%72%3D%22%30%22%20%63%6C%61%73%73%3D%22%6C%6A%5F%65%6D%62%65%64%63%6F%6E%74%65%6E%74%22%20%6E%61%6D%65%3D%22%65%6D%62%65%64%5F%31%32%37%37%36%36%5F%33%22%3E%3C%2F%69%66%72%61%6D%65%3E</div>";
  4.  
  5. afts = new RegExp(".*%3C%69%66%72%61%6D%65%20%73%72%63(.*)%22%20%77%69%64%74%68.*div>", "g");
  6.  
  7. news = unescape('%3C%61%20%68%72%65%66' + befs.replace(afts, "$1") + '%22%3E%59%6F%75%54%75%62%65%20%4C%69%6E%6B%3C%2F%61%3E');
  8.  
  9. document.write(news);
  10.  
Apologies for the long hex chunks. And yeah, my regex is perhaps messed up; input on how to make that cleaner would be nice, but isn't necessary.

What that does is replace "iframe src" with "a href", and cuts out everything from "width" to the end. It then adds ">YouTube Link</a>" to the end.

I don't know how to get this working in Greasemonkey, though. I can get it started, thanks to the Dive Into book:

Expand|Select|Wrap|Line Numbers
  1. var allDivs, thisDiv;
  2.  
  3. allDivs = document.evaluate("//div[@class='LJ_Placeholder_Container']", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
  4.  
  5. for (var i = 0; i < allDivs.snapshotLength; i++) {
  6.   thisDiv = allDivs.snapshotItem(i);
  7.   //Within this node, find the line that has the hex.
  8.   //Put that line into a variable?
  9.   //Run the replacements, as listed above.
  10.   //Insert the new line before the node.
  11.   //Remove the node:
  12.   thisDiv.parentNode.removeChild(thisDiv);
  13. }
  14.  
Would it make sense to use regex to find the multiple lines, capture the portion of the hex that I want, and replace it with the unescaped new hex? That might remove the need to remove the node...

How would I do this?
Dec 26 '07 #1
Share this Question
Share on Google+
3 Replies


acoder
Expert Mod 15k+
P: 16,027
Either use innerHTML to get the content or the DOM methods (example).
Dec 27 '07 #2

XtinaS
P: 3
acoder:

I cannot thank you enough. That pointed me to exactly where I was trying to go. Oh my goodness.

Thanks!!
Dec 28 '07 #3

acoder
Expert Mod 15k+
P: 16,027
You're welcome. Glad it helped. Post again if you have any more questions.
Dec 28 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.