如何将HTML字符串转为JS Document元素传入Mozilla Readability？

嘿，我看你卡在把AJAX获取到的HTML字符串转换成Readability能识别的Document元素这里了，这其实很容易解决，给你两种实用的方案：

方案一：直接填充到创建的空HTML文档里 #

你已经用document.implementation.createHTMLDocument创建了空文档，只需要把AJAX拿到的data（也就是HTML源码）注入到这个文档的根元素里就行：

$('#btn_fetch').on('click', function() { 
  var url = 'https://www.rtl.be/info/monde/france/pierre-bellemare-s-est-eteint-a-88-ans-1025563.aspx'; 
  $.ajax({ 
    type: "GET", 
    url: 'fetchurl.php', 
    data: { url: url }, 
    dataType: "html" 
  }) 
  .done(function(data) { 
    // 创建空文档后，直接把HTML内容替换进去
    var doc = document.implementation.createHTMLDocument("New Document");
    doc.documentElement.innerHTML = data; // 关键代码：注入HTML内容
    
    var article = new Readability(doc).parse(); 
    alert(article.title); 
  }) 
  .fail(function(xhr, ajaxOptions, thrownError) { 
    alert('Error:' + thrownError); // 这里你原来写的是.，应该改成+哦
  }); 
});

方案二：用DOMParser解析HTML字符串（更推荐） #

其实不用手动创建空文档，直接用浏览器原生的DOMParser把HTML字符串解析成完整的Document对象，这是更标准的做法，也能完整保留原HTML的结构（比如DOCTYPE、head标签等）：

$('#btn_fetch').on('click', function() { 
  var url = 'https://www.rtl.be/info/monde/france/pierre-bellemare-s-est-eteint-a-88-ans-1025563.aspx'; 
  $.ajax({ 
    type: "GET", 
    url: 'fetchurl.php', 
    data: { url: url }, 
    dataType: "html" 
  }) 
  .done(function(data) { 
    // 使用DOMParser直接解析HTML字符串为Document
    var parser = new DOMParser();
    var doc = parser.parseFromString(data, "text/html");
    
    var article = new Readability(doc).parse(); 
    alert(article.title); 
  }) 
  .fail(function(xhr, ajaxOptions, thrownError) { 
    alert('Error:' + thrownError); 
  }); 
});

额外注意点 #

• 记得确保你已经在页面中正确引入了Mozilla Readability的脚本，不然new Readability()会报错
• 两种方案都能让Readability正常解析文档内容，方案二更贴合浏览器的原生解析逻辑，推荐优先使用

内容的提问来源于stack exchange，提问作者usemoslinux