При помощи функции получить из валидного html кода все src рисунков

Question

Нужно реализовать getSrc(), которая на входе получает фрагмент валидного ( то есть записанного без ошибок) html-кода, который может содержать несколько рисунков. Получить значения атрибута src рисунков. Атрибут может быть в одинарных или двойных кавычках например, src="test.png", src='test.png'.

src вернуть строкой

у меня получилось следующее:

function getSrc(html) {
  let str = html.toLowerCase();
  let pos = 0;
  let res = ''
  let k = str.indexOf('<img ');
  let src = str.indexOf("src=", k);
  while (str.indexOf('<img ', pos + 1) != -1) {
    let open =
      str.indexOf('"', src) != -1 ?
      str.indexOf('"', src) :
      str.indexOf("'", src);
    let close =
      str.indexOf('"', open + 1) != -1 ?
      str.indexOf('"', open + 1) :
      str.indexOf("'", open + 1);
    pos += close;
    res += str.slice(open + 1, close) + ' ';

  }

  return res

}

getSrc('<table><tr><td><img width="200" src="google.jpg"></td></tr><tr><td><img width="200" src='
  chrome.jpg '></td></tr><tr><td><img width="200" src="safari.jpg"></td></tr><tr><td><img width="200" src="edge.jpg"></td></tr></table>')

Должно выдавать: google.jpg chrome.jpg safari.jpg edge.jpg. У меня выдает : google.jpg google.jpg google.jpg google.jpg

Понимаю, что ошибка в том, что передаю один и тот же src в while, но как исправить.... Забавно, что на реакте пишу компоненты, а вот с этим туплю)

Answer 1

Ну, если без особых раздумий, то, видимо, поиск img и src нужно перенести внутрь цикла и вести его от pos:

  while (str.indexOf('<img ', pos + 1) != -1) {
      let k = str.indexOf('<img ', pos + 1);
      let src = str.indexOf("src=", k);

Тут правда получается дублирование поиска img, но я не настолько хорошо знаю JS, чтобы нормальный "бесконечный цикл с выходом по условию" написать.

P.S. Весь код:

function getSrc(html) {
  let str = html.toLowerCase();
  let pos = 0;
  let res = ''
  while (str.indexOf('<img ', pos + 1) != -1) {
    let k = str.indexOf('<img ', pos + 1);
    let src = str.indexOf("src=", k);
    let open =
      str.indexOf('"', src) != -1 ?
      str.indexOf('"', src) :
      str.indexOf("'", src);
    let close =
      str.indexOf('"', open + 1) != -1 ?
      str.indexOf('"', open + 1) :
      str.indexOf("'", open + 1);
    pos += close;
    res += str.slice(open + 1, close) + ' ';

  }

  return res

}

console.log(getSrc('<table><tr><td><img width="200" src="google.jpg"></td></tr><tr><td><img width="200" src="chrome.jpg"></td></tr><tr><td><img width="200" src="safari.jpg"></td></tr><tr><td><img width="200" src="edge.jpg"></td></tr></table>'))

Answer 2

При помощи функции получить из валидного html кода все src рисунков

Предложу такой вариант...

const getSrc = html => html.match(/(?<=src=["'])[^'"]+/g)

const v = `<table><tr><td><img width="200" src="google.jpg"></td></tr><tr><td><img width="200" src='chrome.jpg'></td></tr><tr><td><img width="200" src="safari.jpg"></td></tr><tr><td><img width="200" src="edge.jpg"></td></tr></table>`
console.log(getSrc(v))

Вот с циклом...

const getSrc = html => {
  const parser = new DOMParser()
  const doc = parser.parseFromString(html, "text/html")
  return [...doc.querySelectorAll('img')].map(o => o.getAttribute('src'))
}

const v = `<table><tr><td><img width="200" src="google.jpg"></td></tr><tr><td><img width="200" src='chrome.jpg'></td></tr><tr><td><img width="200" src="safari.jpg"></td></tr><tr><td><img width="200" src="edge.jpg"></td></tr></table>`
console.log(getSrc(v))

Вот с while...

const getSrc = html => {
    const a = []
    let i = -1
    do {
        i = html.indexOf('<img', ++i)
        if (~i) {
            let j = html.indexOf('src=', i) + 4
            const v = html[j]
            const k = html.indexOf(v, ++j)
            const s = html.substring(j, k)
            a.push(s)
        }
    } while (~i)
    return a
}

const v = `<table><tr><td><img width="200" src="google.jpg"></td></tr><tr><td><img width="200" src='chrome.jpg'></td></tr><tr><td><img width="200" src="safari.jpg"></td></tr><tr><td><img width="200" src="edge.jpg"></td></tr></table>`
console.log(getSrc(v))

БЛОГ НА HUSL

При помощи функции получить из валидного html кода все src рисунков

Ответы (2 шт):