Finding elements in an object that started as a string_问答_开发者

Finding elements in an object that started as a string

开发者 https://www.devze.com 2023-04-10 02:39 出处：网络

I\'ve got a textarea: <p&开发者_开发技巧gt; Input:<br> <textarea name=\"text_input\" id=\"text_input\"></textarea>

I've got a textarea:

<p&开发者_开发技巧gt;
    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.

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/

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

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

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/

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/