Форум

VladKireev · #1 (**permalink**) 29.12.2021, 17:49

Всем привет!

Подскажите, пожалуйста, по следующей задаче.

В тексте документа в div с определенным классом (или id) необходимо заменить хештеги на ссылки.
Нашел решение для замены с регулярными выражениями:

<div class="aaa">Lorem #hashtag</div>

var repl = $(".aaa");
repl.each(function() {
var string = $(this).text();
$(this).html(string.replace(/#(\S*)/g,'<a href="http://site.ru/$1">$1</a>'));
});

Но проблема в том, что ссылка с хештегов должны быть не однотипные, например:
#one -> site.ru/razdel_1/one
#two -> site.ru/razdel_2/two

Поэтому, видимо необходимо делать список в js файле с перечислением всех вариантов.
И здесь у меня, во-первых, не хватает знаний.
А во вторых, если в перечислении будет, например, 500 вариантов замен – насколько сильно это повлияет на работу сайта?

Заранее благодарю!

ksa · #2 (**permalink**) 29.12.2021, 18:27

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

500 вариантов замен – насколько сильно это повлияет на работу сайта?

Сейчас компы довольно шустрые... Но это же будет происходить при каждом обновлении страницы.

ksa · #3 (**permalink**) 29.12.2021, 18:43

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

Но проблема в том, что ссылка с хештегов должны быть не однотипные, например:

#one -> site.ru/razdel_1/one
#two -> site.ru/razdel_2/two

Поэтому, видимо необходимо делать список в js файле с перечислением всех вариантов.
И здесь у меня, во-первых, не хватает знаний.

Такое можно реализовать как-то так...

<!DOCTYPE html>
<html>
<head>
<script src='https://code.jquery.com/jquery-latest.min.js'></script>
<!--
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
<script src='tmp.js'></script>
-->
<style>
</style>
<script>
$(_ => {
	const obj = {
		one: 1,
		two: 2
	}
	const re = /#(\S*)/g
	$('.aaa').each((i, o) => {
		o.innerHTML = o.textContent.replace(re, (str, e) => {
			return `<a href="http://site.ru/razdel_${obj[e]}/${e}">${e}</a>`
		})
	})
})
</script>
</head>
<body>
<div class="aaa">Lorem #one</div>
<div class="aaa">Lorem #two</div>
</body>
</html>

VladKireev · #4 (**permalink**) 30.12.2021, 19:20

ksa, благодарю! Код рабочий.

Пара уточнений:
1. Допустим заменять необходимо 500 тегов, но путей для ссылок всего 5 видов, например:
#one -> site.ru/razdel_1/one
#two -> site.ru/razdel_1/two
#three -> site.ru/razdel_2/three
#four -> site.ru/razdel_2/four
...

Получается, что код нужно записать так:

$(_ => {
	const obj = {
		one: 1,
		two: 1,
    		three: 2,
    		four: 2
	}

Можно ли как то оптимизировать эту часть, объединив хештеги для одного пути, или на скорость исполнения это не повлияет?

2. Насколько безопасно использование innerHTML в данном случае?

ksa · #5 (**permalink**) 30.12.2021, 19:29

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

или на скорость исполнения это не повлияет?

На скорость не влияет.

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

Насколько безопасно использование innerHTML в данном случае?

Мы тут пропагандируем более "техничные" подходы.

Но, если правильно понимать как работает innerHTML, можно использовать и его.

VladKireev · #6 (**permalink**) 30.12.2021, 20:07

ksa, понял.

Прошу прощения, еще пара новичковских вопросов:

1. Как убрать чувствительность к регистру, то есть, чтобы во всех случаях получался один и тот же результат:
#one -> site.ru/razdel_1/one
#ONE -> site.ru/razdel_1/one
#oNe -> site.ru/razdel_1/one

2. Как сделать, чтобы отсутствующий в списке хештег игнорировался (не преобразовывался в ссылку).
Сейчас если в тексте встречает хештег не из списка, то он преобразуется в:
#hashtag -> site.ru/razdel_undefined/hashtag

рони · #7 (**permalink**) 30.12.2021, 20:19

VladKireev,
Изменение регистра

let key = е.toLowerCase();

return obj[key] ? `<a href="http://site.ru/razdel_${obj[key]}/${key}">${e}</a>` :  str

ksa · #8 (**permalink**) 30.12.2021, 20:22

Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src='https://code.jquery.com/jquery-latest.min.js'></script>
<!--
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
<script src='tmp.js'></script>
-->
<style>
</style>
<script>
$(_ => {
	const obj = {
		one: 1,
		two: 2
	}
	const re = /#(\S*)/g
	$('.aaa').each((i, o) => {
		o.innerHTML = o.textContent.replace(re, (str, e) => {
			const key = e.toLocaleLowerCase()
			if (!obj[key]) return str
			return `<a href="http://site.ru/razdel_${obj[key]}/${key}">${e}</a>`
		})
	})
})
</script>
</head>
<body>
<div class="aaa">Lorem #one</div>
<div class="aaa">Lorem #oNe</div>
<div class="aaa">Lorem #two</div>
<div class="aaa">Lorem #Test</div>
</body>
</html>

VladKireev · #9 (**permalink**) 30.12.2021, 20:41

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

VladKireev,
Изменение регистра

let key = е.toLowerCase();

return obj[key] ? `<a href="http://site.ru/razdel_${obj[key]}/${key}">${e}</a>` :  str

рони, спасибо, буду разбираться.

VladKireev · #10 (**permalink**) 30.12.2021, 20:46

ksa, огромное спасибо! Работает)

Единственное, так и не понял, безопасно ли использовать innerHTML или нет..
Планируется, что пользотели будут оставлять комментарии с хештегами, которые после отпарвки комментария должны преобразовываться в ссылки. В этом случае есть риск?

Форум

Справочник

Discord чат

Курсы javascript