0

I've got a textarea:

<p>
    Input:<br>
    <textarea name="text_input" id="text_input"></textarea>
</p>

I'm trying to treat the textarea value as a jQuery object to be able to find each hypertext link.

That textarea has some related script code:

<script>
$('#text_input').change(process).keyup(process);
function process(){
    var html = $('#text_input').val();
    $(html).find("a").each(function(i,elem){
        alert('got here');
    });
}
</script>

In that textarea, I paste, for example, the text:

<html>
<body>
<a href="http://www.google.com/">hello</a>
</body>
</html>

Problem is, the alert() never fires. What am I missing? I guess the $(html) line has issues.

eoinoc
  • 3,155
  • 3
  • 24
  • 39

5 Answers5

4

Change $(html).find... into $('<div/>').append(html).find... and it will work.

http://jsfiddle.net/NQKuD/

If you want to treat the text as a complete HTML document, you'll have to parse it yourself rather than get jQuery to do it for you. Here's one approach:

function process() {
    var html = $('#text_input').val();
    var rgx = /<a [^>]*href\=\"?([^\"]+)\"?[^>]*>([^<]*)<\/a>/gi;
    var result,url,link;
    while (result = rgx.exec(html)) {
        url = result[1];
        link = result[2];
        alert('url='+url+'\nlink='+link);
    }
}

http://jsfiddle.net/NQKuD/2/

Blazemonger
  • 90,923
  • 26
  • 142
  • 180
  • Almost gets me there! My intention is to be able to manipulate elements in `html`, leaving its structure intact. This, however, gives me a new object with additional `
    `s in it. Even the trick in http://stackoverflow.com/questions/652763/jquery-object-to-string/652771#652771 loses my `` tags...     – eoinoc Oct 03 '11 at 20:00
  • With all respect, your original question didn't ask for a way to manipulate the pasted HTML -- you asked how to find the tags, and why the alert() wasn't firing. – Blazemonger Oct 04 '11 at 13:06
1

var html = $('#text_input').val(); <-- that is wrong

use var html = $('#text_input').html(); instead.

test code:

<textarea id="t123">text&lt;something more</textarea>
<script>
    window.alert($("#t123").val());
    window.alert($("#t123").html());
</script>

also pay real close attention to what you get in the alert.

update:

okay, so difference would be that .html() would refer to the original content of the text area, where as val() would use with value entered/changed.

so, this would fix the problem:

$(document).ready(function(){
    $('#text_input').change(function(){
        var html = $('#text_input').val();
        var dummy = $("<div></div>").html(html);
        dummy.find("a").each(function(i, elem){
            window.alert(elem);
        });
    });
});
jancha
  • 4,916
  • 1
  • 24
  • 39
  • I disagree with you. try out demo code and tell me what is wrong. – jancha Oct 03 '11 at 19:53
  • The ".val()" method definitely works in jQuery to retrieve textarea contents, in all browsers. – Pointy Oct 03 '11 at 19:58
  • I agree about the .val() that it works, simply though that there is issue elsewhere. anyway, as explained, using .val() is better and I agree on that. – jancha Oct 03 '11 at 20:05
  • Very well then! Thanks for updating the answer and providing an example. – Pointy Oct 03 '11 at 20:08
  • Yes, interesting about the .val() and .html() differences. Like my comments on another solution, my objective is the manipulate the HTML and to spit out that HTML. The this with this solution is that dummy's HTML equivalent is different to the original source element. – eoinoc Oct 03 '11 at 20:51
0

If you are having trouble firing the event when pasting using "Paste" in the OS menu, try the input event:

$('#text_input').bind('input', process);

Also, to be able to parse the input content using jquery, you should probably append it to a DOM node:

$('#text_input').bind('input', process);
function process(){
    var html = $('#text_input').val();
    $('<div>').html(html).find('a').each(function(i, elem) {
        alert('got here');
    });
}

Example: http://jsfiddle.net/5npGM/9/

David Hellsing
  • 106,495
  • 44
  • 176
  • 212
0

jQuery will strip out the html and body elements from your HTML string, the find function will then fail to find any a elements as it is searching inside a single a element.

See this question - Using jQuery to search a string of HTML

To prove the point, the following JavaScript will work if you put it inside a document ready block - 

$('#text_input').change(process).keyup(process);

function process() {
    var html = $('#text_input').val();
    $('<div>' + html + '</div>').find("a").each(function(i, elem) {
        alert('got here');
    });
}

Demo - http://jsfiddle.net/Y5L98/4/

Community
  • 1
  • 1
ipr101
  • 24,096
  • 8
  • 59
  • 61
0

You can create an invisible html placeholder and insert the html there (this sounds like a very dangerous method though, :P but I see no other way to use jquery to parse input text).

http://jsfiddle.net/y6tt7/1

<div id="placeholder" style="display:none"></div>



$("#placeholder").html(html).find("a").each(function(i,elem){
        alert('got here 2');
    }).html("");
Joseph Marikle
  • 76,418
  • 17
  • 112
  • 129
  • In conclusion, you think it's not possible to take this entire HTML 'document', to manipulate it, and then to spit out the document in its manipulated form? – eoinoc Oct 03 '11 at 20:53
  • @eoinoc you can do that, but it's not entirely safe. With the present way things are set up, you can paste javascript in there and it will rather than just be treated like text. – Joseph Marikle Oct 03 '11 at 20:54
  • Thanks Joseph. I may have to abandon my attempt of getting HTML code, manipulating it, and spitting it back out. – eoinoc Oct 03 '11 at 21:26
  • @eoinoc Well, I would hope not. :( what were you hoping to use it for? – Joseph Marikle Oct 03 '11 at 21:56
  • The first objective I had was that an HTML page is pasted in, and that the links are all tagged with special parameters, but the rest of the HTML would be intact. I was intending to push out that modified HTML to a second textarea. – eoinoc Oct 04 '11 at 05:36