js Замена текста и адреса (url) через JS 

Дата публикации  Дата изменения26.01.15  КомментарииНет   Просмотры52194

Курсы

Поскольку самым удобным способом найти элемент в DOM — это получить его по id, то он и будет использоваться.

*Примечание: поиск объекта можно также организовать по тегу document.getElementsByTagName('Имя_Тега')[1], getElementsByName, а также другими способами через реализации javascript-библиотек для расширения стандартных возможностей браузеров.

Пример использования:

1. Через вызов скриптов в теле документа (страницы)

Между <head></head>:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Замена текста и url</title>

Между <body></body>:

<div style="text-align:center">

<h2>1. Замена текста</h2><br />

<a id="text" href="http://mysite.ru">Прежний текст</a> <br />
<i> Сравните с исходным кодом </i>

<script type="text/javascript" language="JavaScript">
$a = "Текст заменен"; // текст для замены
document.getElementById('text').innerHTML = $a; // получаем нужное по id и меняем текст
</script>


<h2>2. Объекта с url и соответствующим id </h2>

<a id="link" href="http://www.my-site.com" > Замена url </a> <br />
<i> Сравните с исходным кодом </i>

<script type="text/javascript" language="JavaScript">
$a = "http://www.your-site.com"; // url для замены
document.getElementById('link').href = $a; // получаем нужное по id и меняем href 
</script>


<h2>3. Части url (в src картинки), с добавлением адреса текущей страницы </h2>

<img id="pic" name="pic" alt="картинка" src="http://chart.apis.google.com/chart?cht=qr&chs=300x300&chl=http://www.my-site.com" />
<br />
<i> Посмотрите исходный код и текущий адрес картинки</i>

<script type="text/javascript" language="JavaScript">
$a = window.location.href; // определяем текущий адрес
document.getElementById('pic').src = 'http://chart.apis.google.com/chart?cht=qr&chs=300x300&chl=' + $a; // получаем src по id, оставляем нужное и добавляем адрес текущей страницы
</script>

</div>


2. Через функцию onload

Между <head></head>:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Замена текста и url в onload функции</title>
<script type="text/javascript" language="JavaScript">
window.onload = function myFunction()
{
$a = "Текст заменен"; // текст для замены
document.getElementById('text').innerHTML = $a; // получаем нужное по id и меняем текст

$b = "http://www.your-site.com"; // url для замены
document.getElementById('link').href = $b; // получаем нужное по id и меняем href

$c = window.location.href; // определяем текущий адрес
document.getElementById('pic').src = 'http://chart.apis.google.com/chart?cht=qr&chs=300x300&chl=' + $c; // получаем src по id, оставляем нужное и добавляем адрес текущей страницы
}
</script>

Между <body></body>:

<div style="text-align:center">

<h2>1. Замена текста</h2><br />

<a id="text" href="http://mysite.ru">Прежний текст</a> <br />
<i> Сравните с исходным кодом </i>


<h2>2. Объекта с url и соответствующим id </h2>

<a id="link" href="http://www.my-site.com" > Замена url </a> <br />
<i> Сравните с исходным кодом </i>


<h2>3. Части url (в src картинки), с добавлением адреса текущей страницы </h2>

<img id="pic" name="pic" alt="картинка" src="http://chart.apis.google.com/chart?cht=qr&chs=300x300&chl=http://www.my-site.com" />
<br />
<i> Посмотрите исходный код и текущий адрес картинки</i>

</div>

 Смотреть пример – 1 вариант

 Смотреть пример – 2 вариант

  Размер:  1,94kB | Изменен:  8.08.13 | Загрузок: 472

+

Замена первой подходящей ссылки



Замена всех соответствующих ссылок






Подмена ссылок определенных доменов



где: domens – список доменов, с которых начинаются ссылки, которые нужно подменить;
prefix – текст, который будет добавляться перед ссылками на указанные домены.



+ несколько иное, но тоже интересное:

Подмена url ссылки случайно выбранной из нескольких

<script type="text/javascript">
var a=Math.round(Math.random()*2)
link = new Array();
link[0]="http://site1.com/"
link[1]="http://site2.com/"
link[2]="http://site3.com/"
document.write ("<a href="+link[a]+">Ссылка</a>");
</script>



Бесплатные курсы

Категории

Теги: , , , , , , , , ,

Оцените материал:

Рейтинг: 10.0/10 (4)


КомментарииКомментарии:

Нет комментариев к этой статье.


 

Старые →← Новые