Как преобразовать тексты li в ссылки в javascript случайным образом?

  • Автор темы lozinskiy2015
  • 36
  • Обновлено
  • 13, May 2024
  • #1
Мне нужно преобразовать список текстов li в ссылки с помощью javascript, 3 ссылки случайным образом. ИЗ ЭТОГО:
 <div class="mytd">

<ul>

<li> list 1</li>

<li> list 2</li>

<li> list 3</li>

<li> list 4</li>

<li> list ..</li>

<li> list 99 </li>

<li> list 100</li>

</li>

</div>

<!-- CONVERT TO LINKS -->

<script type="text/javascript">

function getElementsByClass (className) {

var all = document.all ? document.all :

document.getElementsByTagName('*');

var elements = new Array();

for (var i = 0; i < all.length; i++)

if (all[I].className == className)

elements[elements.length] = all[I];

return elements;

}

function makeLinks(className, url) {

nodes = getElementsByClass(className);

for(var i = 0; i < nodes.length; i++) {

node = nodes[I];

text = node.innerHTML

node.innerHTML = '<a href="' + url + text.toLowerCase().replace(/\bamp\b|[^A-Z0-9]+/ig, "-") + '">' + text + '</a>';

}}

</script>

<!-- CONVERT TO LINKS -->

<script type="text/javascript">

makeLinks("mytd", "mywebsite.com/folder/");

</script>
Код (разметка): К ЭТОМУ:
 <div class="mytd"> <ul> <li> list 1</li> <li> <a href="/folder/"> list 2 </a> list 2</a></li> <li> list 3</li> <li> list 4</li> <li> list ..</li> <li> <a href="/folder/"> list 80 </a> list 80</a></li> <li> <a href="/folder/"> list 82 </a> list 82</a></li> <li> list 100</li> </li> </div>
Код (разметка): Я везде выполняю поиск по переполнению стека, но не могу найти ничего, что соответствует моим потребностям.

Что-то вроде этого:
 <ul> <li> list 1</li> <li> list 2</li> <li> list 3</li> <li> list 4</li> <li> list ..</li> <li> list 80 </li> <li> list 82 </li> <li> list 100</li> </li>
Код (разметка):

lozinskiy2015


Рег
16 May, 2015

Тем
1

Постов
3

Баллов
13
  • 09, Jun 2024
  • #2
Абсолютно!!! И почему нужно делать это случайным образом? Это будет мешать SEO и вашим посетителям: «Эй, Брэд, посмотри на это, черт возьми, это была ссылка в прошлый раз, интересно, почему меня заблокировали?»
 

tstert


Рег
09 Nov, 2015

Тем
0

Постов
2

Баллов
2
  • 11, Jun 2024
  • #3
1) Разве это не должно быть сделано НА СЕРВЕРНОЙ СТОРОНЕ?

2) Барбара Уолтерс, не 2003 год, можешь перестать говорить type="text/JavaScript"

3) если вам ДЕЙСТВИТЕЛЬНО не нужна поддержка IE6/более ранних версий, вам не нужно создавать запутанный беспорядок с полифилом для getElementsByClassName, он существует.

4) Опять же, в случае с Бабавой Вавой, InternalHTML — это пережиток, использования которого следует избегать.

Это называется DOM, используйте его. 5) в вашей разметке нет классов, которыми можно было бы манипулировать, или идентификатора, по которому можно было бы ее перехватить. 6) Якорь в вашем преобразовании — это ерунда, поскольку вы закрываете дважды, и все они имеют один и тот же URI.

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

Сначала давайте сделаем некоторую разметку, которую мы сможем перехватить.
 

function makeLinks(parentClass, uri) {

for (

var

i = 0,

matchedLi = document.querySelectorAll('.' + parentClass + ' li'),

li, a, text;

li = matchedLi[i];

i++

) {

a = li.appendChild(document.createElement('a'));

a.href = uri + li.textContent.toLowerCase().trim().replace(/[\W]+/g, '-');

a.appendChild(document.createTextNode(li.textContent));

while (a.previousSibling) li.removeChild(a.previousSibling);

}

}

makeLinks('randomLinks', 'folder/');

Код (разметка): сначала давайте создадим версию, которая преобразует их все в ссылки.
  <ul class="randomLinks"> <li>list 1</li> <li>list 2</li> <li>list 3</li> <li>list 4</li> <li>list ..</li> <li>list 80 </li> <li>list 82 </li> <li>list 100</li> </ul>


Код (разметка): После этого вам не составит труда рандомизировать выполнение только трех из них.



Создайте привязку как элемент DOM, прикрепите ее, установите атрибуты и удалите существующие узлы DOM, используя обход DOM, что в целом быстрее, менее подвержено проблемам и не создает рисков безопасности, связанных с написанием дерпи "innerHTML" - что-то что ИМХО никогда не должно было быть частью JavaScript.



или, по крайней мере, не для записи в "живой" DOM.
 

Lord_Prime


Рег
11 Jan, 2013

Тем
1

Постов
2

Баллов
12
Тем
49554
Комментарии
57426
Опыт
552966

Интересно