How can you detect a link in text and use oembed/jquery to change it (like Facebook, Twitter, etc.)

I want users to be able to copy and paste the link of something and, using oembed, paste 开发者_Python百科it into a text box. From here I want to be able to identify the url and turn it into an oembed object or whatever you would call it. (e.x. Youtube Page=> URL=> textarea=> oembed=> embeded)

---

You can do it using the jquery oembed plugin:

http://code.google.com/p/jquery-oembed/

Hope this helps. Cheers

---

If you want a simple JS example without the use of an external library (This is for Facebook, but the same concept can be implemented for other providers).

$().ready(function() {
  $('.facebookLink').each(function() {
    var container = $(this);
    var url = jQuery.trim(container.text());
    container.text("");
    if (url) {
      $.ajax({
        url: "https://apps.facebook.com/plugins/post/oembed.json/",
        data: {
          "url": url
        },
        dataType: "jsonp",
        async: false,
        success: function(data) {
          container.html(data.html);
        }
      });
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="facebookLink">https://www.facebook.com/FacebookDevelopers/posts/10152128760693553</div>

You can checkout the documentation here..

https://developers.facebook.com/docs/plugins/oembed-endpoints

Note: In order to make this API work properly with ajax calls on mobile devices; You need to use the endpoint domain "apps.facebook.com" instead of "www.facebook.com":

https://apps.facebook.com/plugins/post/oembed.json/?url={content-url}

This is because if you use the endpoint that is provided in the official documentation "www.facebook.com" the User agent of the mobile devices will force the redirect to "m.facebook.com" which does not have this endpoint implemented.