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

 
0
 
JavaScript
ava
nule | 05.11.2011, 17:20
Приветствую!
Задача сделать кликабельными ссылки внутри тега 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;

Не могу правильно сформулировать последнюю строку, помеченную как отсебятина. :(
Помогите пожалуйста.
Спасибо!
Kommentare (26)
ava
Amphiluke | 05.11.2011, 19:41 #
Цитата (nule @ 5.11.2011, 20:20 findReferencedText)
.replase

Что за метод? smile
ava
nule | 05.11.2011, 19:48 #
Цитата (Amphiluke @ 5.11.2011, 19:41)
Цитата (nule @  5.11.2011, 20:20 \\"findReferencedText\\")
.replase


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

Да, метод действительно хреновенький smile
Т.е. должно работать?
ava
Evghenusi | 05.11.2011, 20:18 #
nule, Amphiluke тебе намекает, что надо быть внимательнее, так как в очередной раз ты допускаешь ошибки при написании методов.

.replaCe
ava
nule | 05.11.2011, 20:19 #
Цитата (Evghenusi @ 5.11.2011, 20:18)
nule, Amphiluke тебе намекает, что надо быть внимательнее, так как в очередной раз ты допускаешь ошибки при написании методов.



.replaCe

В этот раз я понял с первого раза smile
ava
Evghenusi | 05.11.2011, 20:20 #
Цитата (nule @ 5.11.2011, 19:48 findReferencedText)
Да, метод действительно хреновенький

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

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

später ergänzt:
не успел)
ava
nule | 05.11.2011, 20:29 #
Это я подглядел вот в этой теме: http://forum.vingrad.ru/topic-286021.html
Я так понимаю, при помощи innerHTML надо представить содержимое контейнеров в виде html-кода и заменить в нем найденные ранее ссылки на модифицированные, с href=
ava
Evghenusi | 05.11.2011, 20:40 #
даже не знаю как объяснить, но getElementsByTagName("td") выдаст массив всех тегов td которые существуют на странице, то есть если две таблицы и в каждой 20 ячеек, то этот метод найдёт 40 ячеек.

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

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

später ergänzt:
Цитата (nule @ 5.11.2011, 20:29 findReferencedText)
Это я подглядел вот в этой теме: http://forum.vingrad.ru/topic-286021.html


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




....

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

....



Amphiluke выбрал первый элемент массива - ....("body")[0].inn...., ты же пытался работать сразу со всеми элементами
ava
Evghenusi | 05.11.2011, 22:10 #
надеюсь правильно понял автора, и код получился не слишком кривой.
готовый пример, что бы скопировать и протестить)

<!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>


später ergänzt:
Цитата
Планировалось, что все эти интересующие ссылки будут только в тегах td class="code".

Но всё идет к тому, что они будут и в других местах.


ну если идёт smile , то убрать проверку if(td[i].className == 'code')
ava
nule | 05.11.2011, 22:24 #
Цитата


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


Да, но в этом случае текстовые ссылки не будут отделены от нормальных ссылок тегами. Во всем документе регулярные выражения найдут и кликабельные и некликабельные ссылки. Как их различить?
ava
Evghenusi | 05.11.2011, 22:28 #
if(!td[i].getElementsByTagName('a').length)

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

später ergänzt:
скопировать код готовой страницы и протестить не вариант?
ava
Evghenusi | 05.11.2011, 22:54 #
Цитата (nule @ 5.11.2011, 22:24 findReferencedText)
Во всем документе регулярные выражения найдут и кликабельные и некликабельные ссылки.
думал РВ ненужны, но если в ячейках будут не только ссылки, но и текст, то тогда без них наверно не обойтись.

предлагаю:
var re = /http:\/\/[a-z0-9-.]+\.[a-z]{2,3}.+/ig;
но готовый пример выкладывать не буду, иначе у автора пропадёт интерес к решению задачки smile
ava
nule | 06.11.2011, 18:45 #
Проанализировав возможные варианты тегов в исходном документе, составил удовлетворительную комбинацию на основе предложенного 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. Почему так?
ava
&#036;дмитрий | 06.11.2011, 19:09 #
С одинарными кавычками всегда так
ava
Evghenusi | 06.11.2011, 19:23 #
Цитата ($дмитрий @ 6.11.2011, 19:09 findReferencedText)
С одинарными кавычками всегда так
можно подробнее? я суть не уловил


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
ava
nule | 07.11.2011, 21:06 #
Не только запускал, но и изучал.
Добавил регулярку, т.к. может присутствовать произвольный текст.
И вот почти конечный вариант:

var td = document.getElementsByTagName("td");
var re = /https?\:\/\/w*\.*(?:rapidshare|filesonic)\.(?:com|net)[\w\d:#@%/;$()~_?\+-=\\\.&]*/gi
urls = new Array();
for (i=0; i<td.length; i++ ){
if (td[i].className == "code"){
if(!td[i].getElementsByTagName("a").length){
while ((urls = re.exec(td[i].innerHTML))!= null){
td[i].innerHTML=td[i].innerHTML.replace(re, '<a href="$1">$1</a>');
}
}
}
}

Работает, как мне надо, за исключением всё того же момента. Ссылки заменяет не на ссылки, а на $1. Кавчки я разные пробовал в разных комбинациях.
$дмитрий, не могли бы Вы уточнить ваш ответ на этот вопрос?
ava
&#036;дмитрий | 08.11.2011, 07:26 #
nule, чтобы заработало замени регулярку

var re = /(https?\:\/\/w*\.*(?:rapidshare|filesonic)\.(?:com|net)[\w\d\:#@%/;$()~_?\+-=\\\.&]*)/gi

Про кавычку - недосып smile
ava
nule | 08.11.2011, 11:31 #
Цитата ($дмитрий @ 8.11.2011, 07:26)
nule, чтобы заработало замени регулярку



var re = /(https?\:\/\/w*\.*(?:rapidshare|filesonic)\.(?:com|net)[\w\d\:#@%/;$()~_?\+-=\\\.&]*)/gi



Про кавычку - недосып smile

Спасибо, понял. Запоминающие скобки.
Но теперь новая напасть.

var re = /https?(\:\/\/w*\.*(?:rapidshare|filesonic)[\w\d:#@%/;$()~_?\+-=\\\.&]*)/gi

Вот так выводит нормально (без http, разумеется).
Если же вять в скобки всё выражение то сценарий заклинит, а на экран вывалится

https://rapidshare.com/files/1439011131/New_folder__2_.rar%3C/a%3C/a%3C/a%3C/a%3C/a%3C/a%3C/a%3C/a%3C/a">https://rapidshare.com/files/1439011131/New_folder__2_.rar%3C/a%3C/a%3C/a%3C/a%3C/a%3C/a%3C/a%3C/a>">https://rapidshare.com/files/1439011131/New_folder__2_.rar%3C/a%3C/a%3C/a%3C/a%3C/a%3C/a%3C/a%3E>">https://rapidshare.com/files/1439011131/New_folder__2_.rar%3C/a%3C/a%3C/a%3C/a%3C/a%3C/a%3C/a%3E%3C/a">https://rapidshare.com/files/1439011131/New_folder__2_.rar%3C/a%3C/a%3C/a%3C/a%3C/a%3C/a%3C/a>>">https://rapidshare.com/files/1439011131/New_folder__2_.rar%3C/a%3C/a%3C/a%3C/a%3C
............................................................................................................................................и т.д.

Если же в скобки взять только https?(\:\/\/w*\.* то тоже всё нормально.
Это можно как-то объяснить?
ava
&#036;дмитрий | 08.11.2011, 13:20 #
nule, экранируй двоеточие
ava
nule | 08.11.2011, 14:02 #
Цитата ($дмитрий @ 8.11.2011, 13:20)
nule, экранируй двоеточие

Вы имеете ввиду двоеточие в этом выражении [\w\d:#@%/;$()~_?\+-=\\\.&]?
\: не помогает.
ava
&#036;дмитрий | 08.11.2011, 14:23 #

var re = /https?\:\/\/(w*\.*(?:rapidshare|filesonic)\.(?:com|net)[\w\d\:#@%/;$()~_?\+-=\\\.&]*)/gi;
ava
nule | 08.11.2011, 14:43 #
Не помогает. Тоже самое.
ava
&#036;дмитрий | 08.11.2011, 14:56 #
Запости итоговый код
ava
nule | 08.11.2011, 16:31 #

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="ltr">
<head>
</head>
<body style="height: 100%;">
<table width="90%" cellspacing="1" cellpadding="3" border="0" align="center">
<tr>
<td><span class="genmed"><strong>Code:</strong></span></td>
<td class="code">https://rapidshare.com/files/1439011131/New_folder__2_.rar ggfffffffffffff
http://rapidshare.net hthjhtt</td>
<td class="code">https://www.filesonic.com/files/1439011131/New_folder__2_.rar</td>
<td class="code">httttttth http://rapidshare.com/files ytthn jjjjjj <a name="top" id="top"></a></td>
</tr>
<tr>
</td></tr></table>

<script LANGUAGE="JavaScript">

// function codelinks()
//{
var td = document.getElementsByTagName("td");
var re = /https?\:\/\/w*\.*(?:rapidshare|filesonic)[\w\d:#@%/;$()~_?\+-=\\\.&]*/gi;
urls = new Array();
for (i=0; i<td.length; i++ ){
if (td[i].className == "code"){
if(!td[i].getElementsByTagName("a").length){
while ((urls = re.exec(td[i].innerHTML))!= null){
td[i].innerHTML=td[i].innerHTML.replace(re, '<a href="$1">$1</a>');
}
}
}
}
//}
//window.onload = codelinks;

</SCRIPT>
</body></html>

Вот всё что есть.
ava
Lols | 08.11.2011, 17:53 #
У меня какая-то ерунда получается при тестировании...
ava
&#036;дмитрий | 08.11.2011, 18:08 #
Лови

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="ltr">
<head>
</head>
<body style="height: 100%;">
<table width="90%" cellspacing="1" cellpadding="3" border="0" align="center">
<tr>
<td><span class="genmed"><strong>Code:</strong></span></td>
<td class="code">https://rapidshare.com/files/1439011131/New_folder__2_.rar ggfffffffffffff
http://rapidshare.net hthjhtt</td>
<td class="code">https://www.filesonic.com/files/1439011131/New_folder__2_.rar</td>
<td class="code">httttttth http://rapidshare.com/files ytthn jjjjjj <a name="top" id="top"></a></td>
</tr>
<tr>
</td></tr></table>
<script LANGUAGE="JavaScript">
// function codelinks()
//{
var td = document.getElementsByTagName("td");
var re = /(https?\:\/\/)(w*\.*(?:rapidshare|filesonic)[\w\d\:#@%/;$()~_\?\+\-=\\\.&]*)/gi;
urls = new Array();
for (i=0; i<td.length; i++ ){
if (td[i].className == "code"){
if(!td[i].getElementsByTagName("a").length){
//while ((urls = re.exec(td[i].innerHTML))!= null){
td[i].innerHTML=td[i].innerHTML.replace(re, '<a href="$1$2">$2</a>');
//}
}
}
}
//}
//window.onload = codelinks;
</SCRIPT>
</body></html>
ava
nule | 08.11.2011, 18:46 #
Огромное спасибо! Всё работает. While действительно был лишним. Это был пережиток предыдущих так сказать версий.
Кстати, без этого цикла ухищрения $1$2 уже не нужны. Прекрасно работает одна пара запоминающих скобок.

später ergänzt:
Цитата (Lols @ 8.11.2011, 17:53)
У меня какая-то ерунда получается при тестировании...

Так там ерунда и получалась smile
Registrieren Sie sich oder melden Sie sich an, um schreiben zu können.
Unternehmen des Tages
Вы также можете добавить свою фирму в каталог IT-фирм, и публиковать статьи, новости, вакансии и другую информацию от имени фирмы.
Подробнее
Mitwirkende
advanced
Absenden