VPF::Сделать ссылку в тексте кликабельной

nule

Дата 5.11.2011, 16:20 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 76
Регистрация: 3.11.2011

Репутация: нет
Всего: нет

Приветствую!
Задача сделать кликабельными ссылки внутри тега td класса "code".

Код


function codelinks() {
var tdclasses = document.getElementsByTagName("td"); 
codes = new Array();
for (i=0; i<tdclasses.length; i++ )
if (tdclasses[i].className == "code"){
codes.push(tdclasses[i]);
}
//сформировали массив из td "code"

codeshtml= new Array();
for (j=0; j<codes.length; j++ )
codeshtml.push(codes[j].innerHTML);
//сформировали массив из html внутри td "code"
var ss=/(http:\/\/.+\.[a-z]{2,3})/gi;
for (k=0; k<codeshtml.length; k++ )
document.getElementsByTagName("td").innerHTML=codeshtml[k].replase(ss, "<a href='$1'>$1</a>");//тут всякая отсебятина
 }
   window.onload = codelinks;

Не могу правильно сформулировать последнюю строку, помеченную как отсебятина. :(
Помогите пожалуйста.
Спасибо!

Amphiluke

Дата 5.11.2011, 19:41 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112

Цитата(nule @ 5.11.2011, 20:20

)

.replase

Что за метод? smile

nule

Дата 5.11.2011, 19:48 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 76
Регистрация: 3.11.2011

Репутация: нет
Всего: нет

Цитата(Amphiluke @ 5.11.2011, 19:41)

Цитата(nule @ 5.11.2011, 20:20

)

.replase

Что за метод? smile

Да, метод действительно хреновенький smile

Т.е. должно работать?

Evghenusi

Дата 5.11.2011, 20:18 (ссылка)

(нет голосов)

Загрузка ...

майский жук

Профиль
Группа: Участник
Сообщений: 506
Регистрация: 3.8.2006
Где: Молдова, Кишинёв

Репутация: 3
Всего: 15

nule, Amphiluke тебе намекает, что надо быть внимательнее, так как в очередной раз ты допускаешь ошибки при написании методов.

.replaCe

nule

Дата 5.11.2011, 20:19 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 76
Регистрация: 3.11.2011

Репутация: нет
Всего: нет

Цитата(Evghenusi @ 5.11.2011, 20:18)

В этот раз я понял с первого раза smile

Evghenusi

Дата 5.11.2011, 20:20 (ссылка)

(нет голосов)

Загрузка ...

майский жук

Профиль
Группа: Участник
Сообщений: 506
Регистрация: 3.8.2006
Где: Молдова, Кишинёв

Репутация: 3
Всего: 15

Цитата(nule @ 5.11.2011, 19:48

)

Да, метод действительно хреновенький

хотя если это предложение подразумевает, что ты понял ошибку то пардон.

поясни пожалуйста что должна делать следующая строка:
document.getElementsByTagName("td").innerHTML=

Добавлено через 35 секунд
не успел)

nule

Дата 5.11.2011, 20:29 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 76
Регистрация: 3.11.2011

Репутация: нет
Всего: нет

Это я подглядел вот в этой теме: http://forum.vingrad.ru/topic-286021.html
Я так понимаю, при помощи innerHTML надо представить содержимое контейнеров в виде html-кода и заменить в нем найденные ранее ссылки на модифицированные, с href=

Evghenusi

Дата 5.11.2011, 20:40 (ссылка)

(нет голосов)

Загрузка ...

майский жук

Профиль
Группа: Участник
Сообщений: 506
Регистрация: 3.8.2006
Где: Молдова, Кишинёв

Репутация: 3
Всего: 15

даже не знаю как объяснить, но getElementsByTagName("td") выдаст массив всех тегов td которые существуют на странице, то есть если две таблицы и в каждой 20 ячеек, то этот метод найдёт 40 ячеек.

вот и получается: массив(в котором все td).innerHTML= и ты разом всем ячейкам пытаешься поменять значение. Такое не прокатит.

прошу прощение за кривое объяснение)

Добавлено @ 20:45

Цитата(nule @ 5.11.2011, 20:29

)

Это я подглядел вот в этой теме: http://forum.vingrad.ru/topic-286021.html

Цитата(Amphiluke @ 2.1.2010, 11:53

)

Код


....
document.getElementsByTagName("body")[0].innerHTML =
....

Amphiluke выбрал первый элемент массива - ....("body")[0].inn...., ты же пытался работать сразу со всеми элементами

Это сообщение отредактировал(а) Evghenusi - 5.11.2011, 20:46

Evghenusi

Дата 5.11.2011, 22:10 (ссылка)

(нет голосов)

Загрузка ...

майский жук

Профиль
Группа: Участник
Сообщений: 506
Регистрация: 3.8.2006
Где: Молдова, Кишинёв

Репутация: 3
Всего: 15

надеюсь правильно понял автора, и код получился не слишком кривой.
готовый пример, что бы скопировать и протестить)

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script type="text/javascript">
            function codelinks()
            {
                var table = document.getElementById('my');
                var td = table.getElementsByTagName('td');
                var j = 0;
                
                for(var i=0; i<td.length; i++)
                {
                    if(td[i].className == 'code')
                    {
                        if(!td[i].getElementsByTagName('a').length)
                        {
                            td[i].innerHTML='<a href="'+td[i].innerHTML+'">хз_'+j+'</a>';
                            j++;
                        }
                    }
                }
                
            }
        </script>
    </head>
    <body>
        <table id="my" border="1">
            <tr>
                <td class="code">http://www.rapidshare.com/files/1439011131/New_folder__2_.rar</td>
                <td class="code">http://www.rapidshare.com/files/1439011131/New_folder__2_.rar</td>
                <td class="code">http://www.rapidshare.com/files/1439011131/New_folder__2_.rar</td>
                <td class="code">http://www.rapidshare.com/files/1439011131/New_folder__2_.rar</td>
            </tr>
            <tr>
                <td class="code">http://www.rapidshare.com/files/1439011131/New_folder__2_.rar</td>
                <td class="code">http://www.rapidshare.com/files/1439011131/New_folder__2_.rar</td>
                <td class="code">http://www.rapidshare.com/files/1439011131/New_folder__2_.rar</td>
                <td class="code">http://www.rapidshare.com/files/1439011131/New_folder__2_.rar</td>
            </tr>
            <tr>
                <td class="code">http://www.rapidshare.com/files/1439011131/New_folder__2_.rar</td>
                <td class="code">http://www.rapidshare.com/files/1439011131/New_folder__2_.rar</td>
                <td class="code">http://www.rapidshare.com/files/1439011131/New_folder__2_.rar</td>
                <td class="code">http://www.rapidshare.com/files/1439011131/New_folder__2_.rar</td>
            </tr>
            <tr>
                <td class="code">http://www.rapidshare.com/files/1439011131/New_folder__2_.rar</td>
                <td class="code">http://www.rapidshare.com/files/1439011131/New_folder__2_.rar</td>
                <td class="code">http://www.rapidshare.com/files/1439011131/New_folder__2_.rar</td>
                <td class="code">http://www.rapidshare.com/files/1439011131/New_folder__2_.rar</td>
            </tr>
        </table>
        <input type="button" onclick="codelinks()" value="поехали))" />
    </body>
</html>

Добавлено через 1 минуту и 39 секунд

Цитата

Планировалось, что все эти интересующие ссылки будут только в тегах td class="code".
Но всё идет к тому, что они будут и в других местах.

ну если идёт smile

, то убрать проверку if(td[i].className == 'code')

nule

Дата 5.11.2011, 22:24 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 76
Регистрация: 3.11.2011

Репутация: нет
Всего: нет

Цитата

ну если идёт , то убрать проверку if(td[i].className == 'code')

Да, но в этом случае текстовые ссылки не будут отделены от нормальных ссылок тегами. Во всем документе регулярные выражения найдут и кликабельные и некликабельные ссылки. Как их различить?

Evghenusi

Дата 5.11.2011, 22:28 (ссылка)

(нет голосов)

Загрузка ...

майский жук

Профиль
Группа: Участник
Сообщений: 506
Регистрация: 3.8.2006
Где: Молдова, Кишинёв

Репутация: 3
Всего: 15

if(!td[i].getElementsByTagName('a').length)

смотри код, всё есть

Добавлено через 1 минуту и 5 секунд
скопировать код готовой страницы и протестить не вариант?

Evghenusi

Дата 5.11.2011, 22:54 (ссылка)

(нет голосов)

Загрузка ...

майский жук

Профиль
Группа: Участник
Сообщений: 506
Регистрация: 3.8.2006
Где: Молдова, Кишинёв

Репутация: 3
Всего: 15

Цитата(nule @ 5.11.2011, 22:24

)

Во всем документе регулярные выражения найдут и кликабельные и некликабельные ссылки.

думал РВ ненужны, но если в ячейках будут не только ссылки, но и текст, то тогда без них наверно не обойтись.

предлагаю:

Код

var re = /http:\/\/[a-z0-9-.]+\.[a-z]{2,3}.+/ig;

но готовый пример выкладывать не буду, иначе у автора пропадёт интерес к решению задачки smile

nule

Дата 6.11.2011, 18:45 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 76
Регистрация: 3.11.2011

Репутация: нет
Всего: нет

Проанализировав возможные варианты тегов в исходном документе, составил удовлетворительную комбинацию на основе предложенного Evghenusi варианта. За что ему отдельное спасибо!
Также пришлось ввести регулярное выражение. Но опять не всё гладко.

Код


for(var i=0; i<td.length; i++)
{
   if(!td[i].getElementsByTagName('a').length)
{
document.getElementsByTagName("td")[i].innerHTML = td[i].innerHTML.replace(re, '<a href="$1">$1</a>');
}
}

Не работает '<a href="$1">$1</a>'. Замена происходит буквально, т.е. вместо текста ссылки получаем кликабельную $1, которая ссылается на $1. Почему так?

$дмитрий

Дата 6.11.2011, 19:09 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 19.6.2004

Репутация: 5
Всего: 45

С одинарными кавычками всегда так

Evghenusi

Дата 6.11.2011, 19:23 (ссылка)

(нет голосов)

Загрузка ...

майский жук

Профиль
Группа: Участник
Сообщений: 506
Регистрация: 3.8.2006
Где: Молдова, Кишинёв

Репутация: 3
Всего: 15

Цитата($дмитрий @ 6.11.2011, 19:09

)

С одинарными кавычками всегда так

можно подробнее? я суть не уловил

nule, чью регулярку использовал?
снова наблюдаю:

Цитата

document.getElementsByTagName("td")[i].innerHTML = td[i].innerHTML.replace(re, '<a href="$1">$1</a>');

и чёт нервничать начинаю smile

ладно, не буду томить, предлагаю такое решение:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script type="text/javascript">
            function codelinks()
            {
                var table = document.getElementById('my');
                var td = table.getElementsByTagName('td');
                var j = 0;
                var re = /http:\/\/[a-z0-9-.]+\.[a-z]{2,3}.+/ig;
                
                
                
                for(var i=0; i<td.length; i++)
                {
                    if(td[i].className == 'code' || td[i].innerHTML.match(re))
                    {
                        if(!td[i].getElementsByTagName('a').length)
                        {
                            td[i].innerHTML='<a href="'+td[i].innerHTML+'">хз_'+j+'</a>';
                            j++;
                        }
                    }
                }
                
            }
        </script>
    </head>
    <body>
        <table id="my" border="1">
            <tr>
                <td class="code">http://www.rapidshare.com/files/1439011131/New_folder__2_.rar</td>
                <td>dsvsdv</td>
                <td>http://www.rapidshare.com/files/1439011131/New_folder__3_.rar</td>
                <td>vsdvsdv</td>
            </tr>
        </table>
        <input type="button" onclick="codelinks()" value="поехали))" />
    </body>
</html>

nule, скопируй весь пример и запусти в браузере, после уже "составляй удовлетворительную комбинацию" smile

Это сообщение отредактировал(а) Evghenusi - 6.11.2011, 19:29

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »