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

[XtinaS]

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:

<div class="LJ_Placeholder_Container" style="width: 475px; height: 405px;">
    <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>
    <div class="LJ_Container"></div>
    <a href="" onclick="return false;">
        <img src="http://stat.livejournal.com/img/videoplaceholder.png" class="LJ_Placeholder" title="Click to show embedded content" />
    </a>
</div>
 

That pile of hex turns into this iframe element:

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

var afts, befs, news;
 
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>";
 
afts = new RegExp(".*%3C%69%66%72%61%6D%65%20%73%72%63(.*)%22%20%77%69%64%74%68.*div>", "g");
 
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');
 
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:

var allDivs, thisDiv;
 
allDivs = document.evaluate("//div[@class='LJ_Placeholder_Container']", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
 
for (var i = 0; i < allDivs.snapshotLength; i++) {
  thisDiv = allDivs.snapshotItem(i);
  //Within this node, find the line that has the hex.
  //Put that line into a variable?
  //Run the replacements, as listed above.
  //Insert the new line before the node.
  //Remove the node:
  thisDiv.parentNode.removeChild(thisDiv);
}
 

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?

[acoder]

Either use innerHTML to get the content or the DOM methods (example).

[XtinaS]

acoder:

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

Thanks!!

[acoder]

You're welcome. Glad it helped. Post again if you have any more questions.