Замена хештегов на ссылки
Всем привет!
Подскажите, пожалуйста, по следующей задаче. В тексте документа в 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 вариантов замен – насколько сильно это повлияет на работу сайта? Заранее благодарю! |
Цитата:
|
Цитата:
<!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>
|
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 в данном случае? |
Цитата:
Цитата:
Но, если правильно понимать как работает innerHTML, можно использовать и его. |
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 |
VladKireev,
Изменение регистра
let key = е.toLowerCase();
return obj[key] ? `<a href="http://site.ru/razdel_${obj[key]}/${key}">${e}</a>` : str
|
Как вариант...
<!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>
|
Цитата:
|
ksa, огромное спасибо! Работает)
Единственное, так и не понял, безопасно ли использовать innerHTML или нет.. Планируется, что пользотели будут оставлять комментарии с хештегами, которые после отпарвки комментария должны преобразовываться в ссылки. В этом случае есть риск? |
| Часовой пояс GMT +3, время: 20:52. |