Поиск и замена js

104
04 января 2021, 22:40

Есть некий html в переменной. Нужно найти все ссылки и заменить href каждой по принципу: href первой ссылки - текст первого элемента массива, href второй ссылки - текст второго элемента массива и т. д. Ссылок в тексте может быть от 0 до бесконечности. Измененный текст нужно поместить в переменную.
Пытался так
$(text).find('a').get(i).attr('href', $href[i]) - обижается на attr.
Так
$(text).find('a:eq('+i+')').attr('href', $href[i]) - тоже не то.

Помогите пожалуйста.

Answer 1

const text = ` 
  <div> 
   <a href="link.one.ru">Link</a> 
   <ul> 
     <li>1</li> 
     <li>2</li> 
     <li><a href="link.two.ru">3</a></li> 
   </ul> 
   <div> 
     <a href="link.three.ru"> 
       <img src="some.pic.ru"> 
     </a> 
   </div> 
  </div> 
`; 
 
const links = [ 
  'google.com', 
  'yandex.ru', 
  'vk.com' 
]; 
 
 
// result - html c измененными ссылками 
const result = $(text) 
result.find('a[href]').each((i, el) => { 
   el.href = links[i]; 
}); 
 
console.log(result.html());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

Так как у вас результат выборки - множество ссылок, нужно итерировать их все.

$(text).find('a').each(function(index) {
  $(this).attr('href', $href[index]);
});

Пример:

    const text = `<div> 
    Текст с <a href=1>некоторым</a> <a href=1>количеством</a> <a href=1>ссылок</a> 
    </div>`; 
    const el = $(text); 
    const $href = [ 
      '/link1', 
      '/link2', 
      '/link3', 
    ]; 
 
    const res = el.find('a').each(function(index) { 
      $(this).attr('href', $href[index]); 
    }); 
     
    console.log(el.html());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Для обратной итерации(Хуже, потому что больше походов в DOM):

const text = `<div> 
    Текст с <a href=1>некоторым</a> <a href=1>количеством</a> <a href=1>ссылок</a> 
    </div>`; 
    const el = $(text); 
    const $href = [ 
      '/link1', 
      '/link2', 
      '/link3', 
    ]; 
 
    const res = $href.forEach((link, i) => el.find(`a:eq(${i})`).attr('href', link)); 
     
    console.log(el.html());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Второй код в вопросе почти правильный - он делает то, что нужно, но во временном объекте $(text). Результат получить проблематично) Обратите внимание, что у меня манипуляции производятся над объектом el, из которого в итоге и получается результат

READ ALSO
Унаследовать class от HTMLElement

Унаследовать class от HTMLElement

Код ниже в моём понимание присваивает переменной MyTimerProto ссылку на объект у которого есть свой метод tick и прототипом объекта является HTMLElementprototype

122
Не корректная анимация появления div

Не корректная анимация появления div

Есть контейнер содержимого в галерее, у него стоят display:flex и justify-content: center, так же у каждого элемента галереи есть эффект появления и исчезновенияВ...

129
Как изменять вид ползунка в слайдере?

Как изменять вид ползунка в слайдере?

Есть слайдер-ползунок, работающий с помощью jquery-uihttps://codepen

119