Javascript-форум - Переменные в html

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Переменные в html (https://javascript.ru/forum/dom-window/71210-peremennye-v-html.html)

Переменные в html

Есть код. Таких блоков в странице будет много, у них разные id, типа PANEL-2, PANEL-3...
В каждом таком блоке есть заголовок ЗНАЧЕНИЕ+ПЕРЕМЕННОЙ (он первый в тексте примера), и ссылки в которых используется значение этого заголовка (они ниже и их будет много).

Вопрос. Как сделать так чтобы значение заголовка автоматически вставлялось в ссылки с помощью какой нибудь js-переменной?
Можете помочь с написанием скрипта? Спасибо.

<div class="panel panel-default" id="PANEL-2">
	<div class="panel-heading">
		 <a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-2" href="#panel-element-2">ЗНАЧЕНИЕ+ПЕРЕМЕННОЙ</a>
	</div>
	<div id="panel-element-2" class="panel-collapse collapse">
		<div class="panel-body">
			<a href="http://google.com/ЗНАЧЕНИЕ+ПЕРЕМЕННОЙ">ссылка 1</a>
			<a href="http://google.com/ЗНАЧЕНИЕ+ПЕРЕМЕННОЙ">ссылка 2</a>
			...
		</div>
	</div>
</div>

Цитата:

Сообщение от Exhaust_

ЗНАЧЕНИЕ+ПЕРЕМЕННОЙ

конкретнее

Цитата:

Сообщение от Exhaust_

автоматически вставлялось в ссылки

куда именно? В текст ссылки или атрибут href?

Ты хочешь текст отсюда

Цитата:

Сообщение от Exhaust_

<a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-2" href="#panel-element-2">ЗНАЧЕНИЕ+ПЕРЕМЕННОЙ</a>

Куда-то поместить еще?

У тебя серверноего языка нет совсем?
Не понятно зачем ты преобразовываешь страницу клиентским скриптом... :blink:

Понял, не раскрыл тему. Смотрите

1. Есть такая ссылка, у нее есть анкор. Значение этого анкора скрипт должен вставить в "другие ссылки".

<a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-2" href="#panel-element-2">КЛЮЧЕВОЕ+СЛОВО</a>

2. Это "другие ссылки". На том месте где в них написано "КЛЮЧЕВОЕ+СЛОВО" должен быть код который вставляет наш анкор.

<a href="https://www.google.com.ua/search?q=КЛЮЧЕВОЕ+СЛОВО&adsdiag=3542360">ссылка 1</a>
<a href="https://www.google.com.ua/search?q=КЛЮЧЕВОЕ+СЛОВО&adsdiag=3542361">ссылка 2</a>
...

3. Еще есть блоки с id-шниками типа PANEL-2, PANEL-3.... В блок завернуто все выше перечисленное. И фишка в том что таких блоков будет много и они не должны мешать друг другу работать со скриптом.

<div class="panel panel-default" id="PANEL-2">
...
</div>

Кажись все.

Цитата:

Сообщение от Exhaust_

Еще есть блоки с id-шниками типа PANEL-2, PANEL-3....

Если они обрабатываются одинаково, то у них должен быть какой-то одинаковый класс.
Искать элементы с ИД начинается на PANEL-, считаю моветон...

И опять не понятно почему сервер сразу не делает страницу какой нужно. Почему ее вообще переделывать на клиенте?

Exhaust_,
Понятия немного сбивают с толку. Анкор в html - это #panel-element-2, а подразумевался текст ссылки, как понял я.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

	<div class="panel panel-default" id="PANEL-2">
		<div class="panel-heading">
			<a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-2" href="#panel-element-2">раз+два</a>
		</div>
		<div id="panel-element-2" class="panel-collapse collapse">
			<div class="panel-body">
				<a href="https://www.google.com.ua/search?q=КЛЮЧЕВОЕ+СЛОВО&adsdiag=3542360">ссылка 1</a>
				<a href="https://www.google.com.ua/search?q=КЛЮЧЕВОЕ+СЛОВО&adsdiag=3542361">ссылка 2</a>
			</div>
		</div>
	</div>

	<script>
		(function(parent, title, links, re, window, document) {
			parent = document.querySelectorAll(parent);
			[].forEach.call(parent, function(elem, indx) {
				title = elem.querySelector(title);
				links = elem.querySelectorAll(links);
				[].forEach.call(links, function(link, indx) {
					var href = decodeURI(link.href);
					link.href = href.replace(new RegExp(re), title.textContent.trim());
				});
			});
		})('.panel', '.panel-title', '.panel-body > a', 'КЛЮЧЕВОЕ\\+СЛОВО', window, document);
	</script>	

</body>
</html>

Rasy, почти то что нужно. Работает замечательно если <div id="PANEL-1"> сам по себе. Но когда их несколько, то работает только первый (посмотрите пожалуйста пример в коде страницы), а их будет очень много в одной странице.

PS: я думал, что код ссылок будет выглядеть как то так:
https://www.google.com.ua/search?q=<script>function(...);</script>&adsdiag=3542360

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

	<div class="panel panel-default" id="PANEL-1">
		<div class="panel-heading">
			<a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-1" href="#panel-element-1">1+2</a>
		</div>
		<div id="panel-element-1" class="panel-collapse collapse">
			<div class="panel-body">
				<a href="https://www.google.com.ua/search?q=КЛЮЧЕВОЕ+СЛОВО&adsdiag=3542360">ссылка 1</a>
				<a href="https://www.google.com.ua/search?q=КЛЮЧЕВОЕ+СЛОВО&adsdiag=3542361">ссылка 2</a>
			</div>
		</div>
	</div>
	<div class="panel panel-default" id="PANEL-2">
		<div class="panel-heading">
			<a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-2" href="#panel-element-2">3+4</a>
		</div>
		<div id="panel-element-2" class="panel-collapse collapse">
			<div class="panel-body">
				<a href="https://www.google.com.ua/search?q=КЛЮЧЕВОЕ+СЛОВО&adsdiag=3542360">ссылка 1</a>
				<a href="https://www.google.com.ua/search?q=КЛЮЧЕВОЕ+СЛОВО&adsdiag=3542361">ссылка 2</a>
			</div>
		</div>
	</div>

	<script>
		(function(parent, title, links, re, window, document) {
			parent = document.querySelectorAll(parent);
			[].forEach.call(parent, function(elem, indx) {
				title = elem.querySelector(title);
				links = elem.querySelectorAll(links);
				[].forEach.call(links, function(link, indx) {
					var href = decodeURI(link.href);
					link.href = href.replace(new RegExp(re), title.textContent.trim());
				});
			});
		})('.panel', '.panel-title', '.panel-body > a', 'КЛЮЧЕВОЕ\\+СЛОВО', window, document);
	</script>	

</body>
</html>

Exhaust_,

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

	<div class="panel panel-default" id="PANEL-1">
		<div class="panel-heading">
			<a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-1" href="#panel-element-1">1+2</a>
		</div>
		<div id="panel-element-1" class="panel-collapse collapse">
			<div class="panel-body">
				<a href="https://www.google.com.ua/search?q=КЛЮЧЕВОЕ+СЛОВО&adsdiag=3542360">ссылка 1</a>
				<a href="https://www.google.com.ua/search?q=КЛЮЧЕВОЕ+СЛОВО&adsdiag=3542361">ссылка 2</a>
			</div>
		</div>
	</div>
	<div class="panel panel-default" id="PANEL-2">
 		<div class="panel-heading">
			<a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-2" href="#panel-element-2">3+4</a>
		</div>
		<div id="panel-element-2" class="panel-collapse collapse">
			<div class="panel-body">
				<a href="https://www.google.com.ua/search?q=КЛЮЧЕВОЕ+СЛОВО&adsdiag=3542360">ссылка 1</a>
				<a href="https://www.google.com.ua/search?q=КЛЮЧЕВОЕ+СЛОВО&adsdiag=3542361">ссылка 2</a>
			</div>
		</div>
 	</div>

	<script>
		(function(parent, title, links, re, window, document) {
			parent = document.querySelectorAll(parent);
			[].forEach.call(parent, function(elem, indx) {
				var t = elem.querySelector(title);
				var l = elem.querySelectorAll(links);
				[].forEach.call(l, function(link, indx) {
					var href = decodeURI(link.href);
					link.href = href.replace(new RegExp(re), t.textContent.trim());
				});
			});
		})('.panel', '.panel-title', '.panel-body > a', 'КЛЮЧЕВОЕ\\+СЛОВО', window, document);
	</script>	

</body>
</html>

Спасибо, то что нужно :dance:
+ в карму

Exhaust_,
:thanks: