Найдите все @tagnames внутри элемента, затем вставьте в него ссылку

У меня есть мой HTML

<div class = "comment-details">Hello @samplename This is my comment</div>
...
...
More .comment-details elements

При загрузке страницы я хотел найти этот @samplename внутри класса .comment-details с помощью цикла .each() и вставить его в тег <a href = "samplelink"></a> в jQuery или Javascript

Я хотел что-то вроде этого после загрузки страницы:

<div class = "comment-details">Hello <a href = "samplelink">@samplename</a> This is my comment</div>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
37
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

В необработанном JS вы можете сделать

[...document.querySelectorAll('.comment-details')]
.forEach(tag => {
  tag.innerHTML = tag.innerHTML
    .replace(/\s?@(\w+)\s?/g, ' <a href = "https://twitter.com/$1">@$1</a> ')
})
<div class = "comment-details">Wow @m0meni great answer</div>
<div class = "comment-details">@m0meni a little self-congratulatory though</div>

Объясняя каждый шаг:

  • querySelectorAll получает все блоки с деталями комментариев
  • [...] из-за В Javascript, как лучше всего преобразовать NodeList в массив
  • затем вы используете функцию замены строки регулярным выражением, чтобы делать то, что вы хотите
    • /\s?@(\w+)\s?/g захватывает все символы после @ и делает это только в том случае, если с обеих сторон есть пробел / ничего, т.е. hi @ potoato не будет соответствовать
    • $ 1 во втором аргументе использует совпадение из замены

Работает на рабочем столе Windows, но не работает на сафари iphone :(

Mark Salvania 13.09.2018 21:37

@MarkSalvania, вероятно, из-за распространения Array, поскольку это единственная функция, которая теперь может работать в старых браузерах.

m0meni 13.09.2018 21:59

Понял. Большое спасибо!.

Mark Salvania 13.09.2018 22:00

@MarkSalvania Вместо этого вы могли бы сделать Array.prototype.slice.call(document.querySelectorAll('.comme‌​nt-details'), 0), если это не решит проблему ... тогда извините: '(

m0meni 13.09.2018 22:05
Ответ принят как подходящий

Реализация jQuery:

$('.comment-details').each(function(){
    $(this).html($(this).html().replace(/\@.+?\b/g, `<a href=profile/${$(this).html().match(/\@.+?\b/g)[0].replace('@','')}>${$(this).html().match(/\@.+?\b/g)}</a>`));
});
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "comment-details">Hello @samplename This is my comment</div>
<div class = "comment-details">Hello @JG This is my comment</div>

Я хотел показать @currentname, когда он уже вставлен в тег <a>. Не всегда @samplename

Mark Salvania 13.09.2018 20:42

@MarkSalvania хорошее место, сэр Марк. вы можете использовать match отредактировал мой ответ

95faf8e76605e973 13.09.2018 20:47

Почти :) как обновить <a href = "samplelink"> до <a href = "profile/currentname"> - без @ с ${$(this).html().match(/\@.+?\b/g)}?

Mark Salvania 13.09.2018 21:39

Нет, это основано на том, что находится в @tagname - в этом примере есть «tagname», как получить его с помощью match. Спасибо

Mark Salvania 13.09.2018 21:56

@MarkSalvania, ладно, ты можешь просто заменить еще одну. заменить @ пустой строкой

95faf8e76605e973 13.09.2018 22:01

Идеально!. Спасибо !. Вы полностью ответили на мой вопрос.

Mark Salvania 13.09.2018 22:07

Другие вопросы по теме