主页 / 问题 / 1610952
Accepted
alexWithoutBeard
Asked:2025-04-28 20:34:32 +0000 UTC2025-04-28 20:34:32 +0000 UTC

使用函数，从有效的 html 代码中获取所有 src 图像

  • 772

有必要实现 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，但如何修复它......有趣的是我在 React 中编写组件，但我被这个困住了）

javascript

2 个回答

  1. Best Answer

    使用函数，从有效的 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))

    • 1

  2. 好吧，如果不多想的话，那么显然，搜索需要移到循环内部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 不够了解，无法编写正常的“有条件退出的无限循环”。

    附言：完整代码：

    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>'))

    • 0

相关问题