Javascript-форум - Динамический поиск ссылки (<a><a/>) в добавляемом комментарии (<div class="comment">)

Суть такова: при добавлении комментария ссылка должна отображаться как ссылка, а не как обычный текст.
Можно проверить данный код на http://jsfiddle.net/

<p class="comment-area">This is a long text. It contains 150 characters. You can find more about this text on this link http://www.somewebsite.com/RDFCCSDVDS</p>
<p class="new-area"></p>
<button class="but">but</button>

$('.but').click(function(event) {
var $words = $('p').text().split(' ');
for (i in $words) {
    if ($words[i].indexOf('http://') == 0) {
        $words[i] = '<a href="' + $words[i] + '" rel="nofollow">' + $words[i] + '</a>';
    }
}

$('p.new-area').html($words.join(' '));            
});

Проблемма в том, что в проекте это решение не работает, а если точнее он просто не хочет переопределять старое содержимое переменной $words новым и всё равно отображает ссылки как обычный текст(метка 1):

var $words = $('#text-area-for-comment').val().split(' ');
                    alert($words);
                    for (i in $words) {
                        if ($words[i].indexOf('http://') == 0) {
                            $words[i] = '<a href="' + $words[i] + '" rel="nofollow">' + $words[i] + '</a>';
                        }
                    }
                    alert($words);

                    $('#text-area-for-comment').html($words.join(' ')); //метка 1

Для наглядности получаемого результата втавил функции alert($words);