469,646 Members | 1,567 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,646 developers. It's quick & easy.

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

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>
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>
(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;
  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>";
  5. afts = new RegExp(".*%3C%69%66%72%61%6D%65%20%73%72%63(.*)%22%20%77%69%64%74%68.*div>", "g");
  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');
  9. document.write(news);
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;
  3. allDivs = document.evaluate("//div[@class='LJ_Placeholder_Container']", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
  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. }
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
3 3282
16,027 Expert Mod 8TB
Either use innerHTML to get the content or the DOM methods (example).
Dec 27 '07 #2

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

Dec 28 '07 #3
16,027 Expert Mod 8TB
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.

Similar topics

6 posts views Thread by Rauan Maemirov | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.