为什么我会收到 ParseError？

Question

我正在尝试使用

DOMParser

方法

.parseFromString

将包含 HTML 的数组中的字符串转换为 DOM 元素。

一些字符串出现以下解析错误，我不明白为什么。

这是我用来解析字符串并创建 DOM 元素的循环（感谢这个 stackoverflow 帖子：Converting HTML string into DOM elements?）

var x = 0;
while (x < stringsArray.length) {
  var parser = new DOMParser();
  var doc = parser.parseFromString(stringsArray[x].html, "text/xml");
  outputDOMElements[x] = doc.firstChild;
  x++;
}

这是成功解析字符串的示例：

"<div class="instagrampost"><span>Siamak Amini</span><p>#USA</p><span>Posted 1 month ago</span><a href="https://instagram.com/p/3zG3kDGeE8/"><img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s320x320/e15/11377935_1114448771906000_731563461_n.jpg" /></a></div>"

这是一个存在解析错误的字符串示例：

"<div class="user">
  <a  href="https://twitter.com/theclarkofben" aria-label="Ben Clark (screen name: theclarkofben)" data-scribe="element:user_link" target="_blank">
    <img  alt="" src="https://pbs.twimg.com/profile_images/1877162520/199389_10150123771869463_502259462_6247107_944624_n_normal.jpg" data-src-2x="https://pbs.twimg.com/profile_images/1877162520/199389_10150123771869463_502259462_6247107_944624_n_bigger.jpg" data-scribe="element:avatar">
    <span >

      <span  data-scribe="element:name">Ben Clark</span>
    </span>
    <span   data-scribe="element:screen_name">@theclarkofben</span>

  </a>
</div><p class="tweet">Just testing out the Twitter feed I just made. <a href="https://twitter.com/hashtag/halogenpeanut?src=hash"     data-scribe="element:hashtag" target="_blank">#halogenpeanut</a> <a href="http://t.co/WtoznYSUGS"  data-pre-embedded="true"  data-scribe="" target="_blank">pic.twitter.com/WtoznYSUGS</a></p><p class="timePosted"><a href="https://twitter.com/theclarkofben/status/611514122509922304">Posted on 18 Jun</a></p><div class="media"><img src="https://pbs.twimg.com/media/CHyI2rqWEAAJRN-.jpg:large" alt="Image from tweet" /></div>"

上述字符串的解析错误指出：

error on line 10 at column 7: Opening and ending tag mismatch: img line 0 and a

这是

.parseFromString

对于上述字符串的完整输出：

<div class="user"><parsererror xmlns="http://www.w3.org/1999/xhtml" style="display: block; white-space: pre; border: 2px solid #c77; padding: 0 1em 0 1em; margin: 1em; background-color: #fdd; color: black"><h3>This page contains the following errors:</h3><div style="font-family:monospace;font-size:12px">error on line 10 at column 7: Opening and ending tag mismatch: img line 0 and a
</div><h3>Below is a rendering of the page up to the first error.</h3></parsererror>
  <a href="https://twitter.com/theclarkofben" aria-label="Ben Clark (screen name: theclarkofben)" data-scribe="element:user_link" target="_blank">
    <img alt="" src="https://pbs.twimg.com/profile_images/1877162520/199389_10150123771869463_502259462_6247107_944624_n_normal.jpg" data-src-2x="https://pbs.twimg.com/profile_images/1877162520/199389_10150123771869463_502259462_6247107_944624_n_bigger.jpg" data-scribe="element:avatar">
    <span>

      <span data-scribe="element:name">Ben Clark</span>
    </span>
    <span data-scribe="element:screen_name">@theclarkofben</span></img></a></div>

有人能帮我找出原因并解决吗？可能是 HTML 字符串中的空格？

Answer 1

您在引用方面遇到问题，您在 dom 元素变量中使用双引号

var x = "<div class="instagrampost">

.... 是错误的，html 的引号应该是单引号，此外，dom 元素不应有空格，以便适合变量...

使用

doc.body.innerHTML

将解析的 html 设置为获取的 div，不需要循环，在将内容类型传递给解析器时也使用

"text/html"

而不是

"text/xml"

。

下面是一个工作示例。

var html = "<div class='user'><a  href='https://twitter.com/theclarkofben' aria-label='Ben Clark (screen name: theclarkofben)' data-scribe='element:user_link' target='_blank'><img  alt='' src='https://pbs.twimg.com/profile_images/1877162520/199389_10150123771869463_502259462_6247107_944624_n_normal.jpg' data-src-2x='https://pbs.twimg.com/profile_images/1877162520/199389_10150123771869463_502259462_6247107_944624_n_bigger.jpg' data-scribe='element:avatar'/><span><span  data-scribe='element:name'>Ben Clark</span></span><span   data-scribe='element:screen_name'>@theclarkofben</span></a></div><p class='tweet'>Just testing out the Twitter feed I just made. <a href='https://twitter.com/hashtag/halogenpeanut?src=hash'     data-scribe='element:hashtag' target='_blank'>#halogenpeanut</a> <a href='http://t.co/WtoznYSUGS'  data-pre-embedded='true'  data-scribe='' target='_blank'>pic.twitter.com/WtoznYSUGS</a></p><p class='timePosted'><a href='https://twitter.com/theclarkofben/status/611514122509922304'>Posted on 18 Jun</a></p><div class='media'><img src='https://pbs.twimg.com/media/CHyI2rqWEAAJRN-.jpg:large'alt='Image from tweet' /></div>";

parser = new DOMParser();
doc = parser.parseFromString(html, "text/html");
document.getElementById("parsedHtml").innerHTML = doc.body.innerHTML;

<div id="parsedHtml"></div>

Answer 2

“img”标签未关闭。您正在解析 text/xml 并且标签应该关闭。尝试使用text/html而不是xml

  var doc = parser.parseFromString(stringsArray[x].html, "text/html");

Answer 3

此页面包含以下错误：

第 41 行第 109 列错误：未定义实体“raquo”

下面是第一个错误之前的页面呈现。