Finding elements in an object that started as a string

Question

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.

Blazemonger · Accepted Answer · 2011-10-04 13:15:59Z

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/

edited Oct 4, 2011 at 13:15

answered Oct 3, 2011 at 19:42

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

eoinoc Over a year ago

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 <div/>s in it. Even the trick in stackoverflow.com/questions/652763/jquery-object-to-string/… loses my <html><body> tags...

Blazemonger Over a year ago

With all respect, your original question didn't ask for a way to manipulate the pasted HTML -- you asked how to find the <a> tags, and why the alert() wasn't firing.

jancha · Accepted Answer · 2011-10-03 20:03:49Z

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);
        });
    });
});

edited Oct 3, 2011 at 20:03

answered Oct 3, 2011 at 19:39

jancha

4,9851 gold badge27 silver badges40 bronze badges

5 Comments

jancha Over a year ago

I disagree with you. try out demo code and tell me what is wrong.

Pointy Over a year ago

The ".val()" method definitely works in jQuery to retrieve textarea contents, in all browsers.

jancha Over a year ago

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.

Pointy Over a year ago

Very well then! Thanks for updating the answer and providing an example.

eoinoc Over a year ago

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.

Joseph Marikle · Accepted Answer · 2011-10-03 19:44:44Z

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("");

answered Oct 3, 2011 at 19:44

Joseph Marikle

78.8k18 gold badges114 silver badges130 bronze badges

5 Comments

eoinoc Over a year ago

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?

Joseph Marikle Over a year ago

@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.

eoinoc Over a year ago

Thanks Joseph. I may have to abandon my attempt of getting HTML code, manipulating it, and spitting it back out.

Joseph Marikle Over a year ago

@eoinoc Well, I would hope not. :( what were you hoping to use it for?

eoinoc Over a year ago

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.

David Hellsing · Accepted Answer · 2011-10-03 19:47:18Z

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/

edited Oct 3, 2011 at 19:47

answered Oct 3, 2011 at 19:40

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:47:52Z

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/

edited May 23, 2017 at 11:47

CommunityBot

11 silver badge

answered Oct 3, 2011 at 19:40

ipr101

24.2k8 gold badges61 silver badges62 bronze badges

Collectives™ on Stack Overflow

Finding elements in an object that started as a string

5 Answers 5

2 Comments

5 Comments

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

5 Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related