使用 Google 应用脚本解析 Html答案

【问题标题】：Parse Html using Google App Script使用 Google 应用脚本解析 Html
【发布时间】：2016-02-07 06:18:31
【问题描述】：

我正在尝试在 Google 应用脚本中使用此脚本解析 html

function parse() {

  var html = UrlFetchApp.fetch('http://www.merriam-webster.com/').getContentText();
  var doc = XmlService.parse(html);
  var html = doc.getRootElement();
  var element = getElementsByID(html, 'xx');
  return element;
}


function getElementById(element, idToFind) {  
  var descendants = element.getDescendants();  
  for(i in descendants) {
    var elt = descendants[i].asElement();
    if( elt !=null) {
      var id = elt.getAttribute('id');
      if( id !=null && id.getValue()== idToFind) return elt;    
    }
  }
}

但它说：

第 27 行错误：元素类型“scr”必须后跟属性规范“>”或“/>”。（第 4 行，文件“”）

我正在尝试解析 html，然后使用上面的 getElementById 函数。有什么想法吗？

【问题讨论】：

How to parse an HTML string in Google Apps Script without using XmlService?的可能重复
解析HTML最好的方法是不要使用Xml.parse或XmlService.parse -- stackoverflow.com/a/50856901/452587

标签： google-apps-script

【解决方案1】：

我发现在 google 应用程序中解析 html 的最佳方法是避免使用 XmlService.parse 或 Xml.parse。 XmlService.parse 不适用于某些网站的错误 html 代码。

这里有一个基本示例，说明如何在不使用 XmlService.parse 或 Xml.parse 的情况下轻松解析任何网站。在此示例中，我从“wikipedia.org/wiki/President_of_the_United_States”检索总统列表使用常规的 javascript document.getElementsByTagName()，并将值粘贴到我的谷歌电子表格中。

1- 创建一个新的 Google 表格；

2- 单击菜单工具 > 脚本编辑器... 打开一个带有代码编辑器窗口的新选项卡，并将以下代码复制到您的 Code.gs 中：

function onOpen() {
 var ui = SpreadsheetApp.getUi();
    ui.createMenu("Parse Menu")
      .addItem("Parse", "parserMenuItem")
      .addToUi();

}


function parserMenuItem() {
  var sideBar = HtmlService.createHtmlOutputFromFile("test");
  SpreadsheetApp.getUi().showSidebar(sideBar);
}


function getUrlData(url) {
 var doc = UrlFetchApp.fetch(url).getContentText()
 return doc                               
}

function writeToSpreadSheet(data) {
 var ss = SpreadsheetApp.getActiveSpreadsheet();
 var sheet = ss.getSheets()[0];
 var row=1

   for (var i = 0; i < data.length; i++) {
   var x = data[i];
   var range = sheet.getRange(row, 1)
   range.setValue(x);
   var row = row+1
    }
}

3- 将 HTML 文件添加到您的 Apps 脚本项目中。打开脚本编辑器并选择文件 > 新建 > Html 文件，并将其命名为“test”。然后将以下代码复制到您的 test.html 中

<!DOCTYPE html>
<html>
<head>    
</head>
<body>
<input id= "mButon" type="button" value="Click here to get list"
onclick="parse()">
<div hidden id="mOutput"></div>
</body>
<script>

window.onload = onOpen;

function onOpen() {
 var url = "https://en.wikipedia.org/wiki/President_of_the_United_States"
 google.script.run.withSuccessHandler(writeHtmlOutput).getUrlData(url)
 document.getElementById("mButon").style.visibility = "visible";
}

function writeHtmlOutput(x) {
 document.getElementById('mOutput').innerHTML = x;
}

function parse() {

var list = document.getElementsByTagName("area");
var data = [];

   for (var i = 0; i < list.length; i++) {
   var x = list[i];
   data.push(x.getAttribute("title"))
    }

google.script.run.writeToSpreadSheet(data);
} 
</script> 
</html>

4- 保存您的 gs 和 html 文件并返回到您的电子表格。重新加载您的电子表格。单击“解析菜单”-“解析”。然后点击侧边栏中的“单击此处获取列表”。

【讨论】：

【解决方案2】：

要解析 HTML，您必须对其进行清理，您的页面有一个脚本标记，该标记是用 Javascript 作为字符串编写的，更具体地说：

document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');})

显然，XML 解析器不理解 Javascript 代码，因此您必须手动对其进行清理，这不是一件简单的事情，但是您可以构建一个简单的 RegEx 选择器，如下所示：

function getElementsByID(element, idToFind) {  
  var regId = new RegExp( '(<[^<]*id=[\'"]'+ idToFind +'[\'"][^>]*)' );
  var result = regId.exec( element );
  return result[1] + '>';
}

function parse() {
      var html = UrlFetchApp.fetch('http://www.merriam-webster.com/').getContentText();
      var element = getElementsByID(html, 'search_box_terms');
      return element; // "<input id="search_box_terms" name="query" type="text" placeholder="I'm searching for ..." value="" />"

    }

这将返回您提供的 ID 元素的字符串。这当然是一个简单的正则表达式，并不适用于所有情况，但对大多数情况都适用。

【讨论】：