javascript - 如何解析 JSON 响应中的第二个 HTML anchor 元素

Question

我有一个 JSON 响应，该响应正确返回，并且已在我的 HTML 页面上成功输入了其中的数据。然而，这个 JSON 值返回一些 HTML 代码，我不需要其中的全部代码，只需要第二个 anchor 元素。你们会怎么做？

下面的代码，上面的两个工作正常。 P 元素则不然。有任何想法吗？我只是在控制台中得到undefined。

                // get photo url from description JSON value. 

                var imageURL = $(description).find('a')[ 1 ];
                var parseImageURL = $(imageURL).attr('href');


                // get author URL from description JSON value

                var authorURL = $(description).find('a')[ 0 ];
                var parseAuthorURL = $(authorURL).attr('href');


                // get photo description from descriptions JSON value

                var descriptionText = $(description).find('P')[5];
                console.log(descriptionText);

Answer 1

解析 HTML

您需要“解析”HTML。 (至少)有两种方法可以做到这一点:

DOMParser或者创建一个元素并将 HTML 字符串填充到其中。

下面的示例显示了第二种方法。

1. 在我的示例中，我将一些字符串分配给 HTML，但您是在从 JSON 解析的某个对象中获取它。
2. 创建一个元素。可以是任何旧元素，但我选择了 div
3. 将 HTML 字符串分配给第 2 步中创建的元素的 innerHTML
4. 使用querySelectorAll选择您想要的节点。在此示例中，我选择了所有 p 元素。
5. 我只是注销了第二个 p，但在您的情况下，我假设您将其添加到页面

let HTML = "<p>something</p><p>else</p>";

let el = document.createElement('div');
el.innerHTML = HTML;

let ps = el.querySelectorAll('p');
console.log(ps[1]);