Javascript - 解析自定义标签的最佳方式[重复]答案

【问题标题】：Javascript - best way to parse custom tags [duplicate]Javascript - 解析自定义标签的最佳方式[重复]
【发布时间】：2021-12-14 02:05:26
【问题描述】：

我编写了一个返回以下内容的 API

 <location><lat>41.47033705</lat><lon>-81.93612862</lon></location>
 <location><lat>41.470320224762</lat><lon>-81.9364535808563</lon></location>
 <location><lat>41.4704650640488</lat><lon>-81.9449239969254</lon></location>
 <location><lat>41.4780235290527</lat><lon>-81.8454140424728</lon></location>
 <location><lat>41.48597253</lat><lon>-81.82579113</lon></location>

我有一个 AJAX 调用来获取它，现在我需要在我的 JavaScript 中使用它。

最后我想和 2d Array [lat,lon]

最少的代码量是多少？

【问题讨论】：

正则表达式。
这就是我没有尝试的原因stackoverflow.com/questions/1732348/…
你在用jquery吗？
@abc123 假设这只是 JavaScript 和 Ajax。
@AMR 您的 XML 定义明确，因此执行正则表达式是安全的。

标签： javascript ajax parsing

【解决方案1】：

假设响应是有效的 XML，您可以使用 getElementsByTagName 并推送到数组：

var arr = [];
for (var location in response.getElementsByTagName('location'))
{
    arr.push([
        parseFloat(location.getElementsByTagName('lat')[0]), 
        parseFloat(location.getElementsByTagName('lon')[0])
    ]);
}

【讨论】：

这是我创建的所有自定义标签。这将是标准的，而且永远不会如此，这仍然有效吗？
没有根标签就不是有效的 XML。
@AMR -- 是的，没关系。 Javascript 可以在通过 Ajax 返回的无模式 XML 文档上使用 DOM。
@McGarnagle 顺便说一句，你只是让我大吃一惊，将东西添加到没有大小的数组中......

【解决方案2】：

只需使用 JQuery 的选择器引擎来解析您的代码。

将您的元素包裹在 <div id="data"> ... </data> 中以便于选择，您可以执行以下操作：

var _locations = $('#data').find('location');
var my_data = [];

$.each(_locations, function(index, loc) {
    var _lat = $(loc).find('lat');
    var _lon = $(loc).find('lon');

    my_data.push([_lat.text(), _lon.text()]);
})

// my_data will contain a 2D array of your lat, lon

祝你好运

-基鲁

【讨论】：

用户声明没有 jquery...

【解决方案3】：

Regex 101 Demo

正则表达式

<lat>([^<]+)<\/lat><lon>([^<]+)<\/lon>

使用g（全局）标志

说明

<lat> Literal <lat>
1st Capturing group ([^<]+) 
    Negated char class [^<] 1 to infinite times [greedy] matches any character except:
        < The character <
<\/lat><lon> Literal </lat><lon>
2nd Capturing group ([^<]+) 
    Negated char class [^<] 1 to infinite times [greedy] matches any character except:
        < The character <
<\/lon> Literal </lon>

g modifier: global. All matches (don't return on first match)

可视化

采取以上解决您的具体问题

演示jsFiddle

var text = " <location><lat>41.47033705</lat><lon>-81.93612862</lon></location><location><lat>41.470320224762</lat><lon>-81.9364535808563</lon></location><location><lat>41.4704650640488</lat><lon>-81.9449239969254</lon></location><location><lat>41.4780235290527</lat><lon>-81.8454140424728</lon></location><location><lat>41.48597253</lat><lon>-81.82579113</lon></location>";

var myregexp = /<lat>([^<]+)<\/lat><lon>([^<]+)<\/lon>/g;
var results = new Array();
var match = myregexp.exec(text);
while (match != null) {
    var result = new Array();
    for (var i = 1; i < match.length; i++) {
        result.push(match[i]);
    }
    results.push(result);
    match = myregexp.exec(text);
}

console.log(results);

变量 results 包含一个二维数组 [lat, lon]

【讨论】：

【解决方案4】：

您可以通过 XmlHttmlRequest 进行 AJAX 调用并获取 responseXML。然后您可以通过 XmlDocument 方法和属性解析您的数据。

您甚至可以在结果上运行Xpath queries 以准确选择您需要的内容。

【讨论】：