Question

所以我有一个名为Terms.html的非常简单的HTML页面。这是输出：

Museums, Parks, Railroads and Trains, Shopping, Theatres

这是代码：

<!DOCTYPE html>
<html>
<body> Museums, Parks, Railroads and Trains, Shopping, Theatres </body>
</html>

现在，我正在使用jQuery $ .get方法来检索这个html页面：

<!doctype html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<script>
var tags = [ "String1", "String2"];
$.get("Terms.html", function(data, status) {
    <!--  -->

    $(result).html( data );
    alert("Status: " + status);
});

</script>

<p>Search terms are: <span id="displayterms"></span></p>
<div id="result"><div>

</body>
</html>

我想要做的是能够将Museums, Parks, Railroads and Trains, Shopping, Theatres解析为单个字符串并将它们添加到我的var tags数组中。有关如何做到这一点的任何想法？感谢

Answer 1

尝试：

var tags = ["String1", "String2"];
var str = "Museums, Parks, Railroads and Trains, Shopping, Theatres";
arr = $.map( tags.concat(str.split(',')), function( n ) { return $.trim(n) });
console.log(arr); // Outputs the array ["String1", "String2", "Museums", "Parks", "Railroads and Trains", "Shopping", "Theatres"]

<强> jsFiddle example

第三行在逗号上拆分str，然后使用jQuery的.map（）函数修剪空格。

Answer 2

使用分割功能：http://www.w3schools.com/jsref/jsref_split.asp

这将分割您选择的任何字符，在本例中为“，”

tags = data.split(",");

Answer 3

如果您不需要支持早于9的IE版本，您可以执行以下操作：

var tags = document.body.textContent.split(',').map(
    function (s) {
        return s.trim();
    }
);

document.body.textContent获取body标签中的文本。这限制了您的浏览器支持，因为IE在版本9之前没有这个。

.split(',')获取字符串并将其拆分为组件部分，返回一个数组。

.map()将函数应用于.split(',')返回的数组中的所有内容，并返回结果数组。在这种情况下，我们使用它在数组中的每个字符串上调用trim()，以去除前导和尾随空格。 IE版本在版本9之前没有Array.prototype.map或String.prototype.trim方法，但它们很容易填充。这是textContent以上的事情，比较棘手。

然后将map()返回的数组放入tags变量。

Answer 4

您可以将它们存储在JSON数据文件中，而不是将内容存储为HTML。

示例JSON数据文件（places.json）：

{
    "Names": [ "Museums", "Parks", "Railroads and Trains", "Shopping", "Theatres"]
}

然后，您可以将页面代码更改为：

<script>
var tags = [ "String1", "String2"];
$.getJSON("/places.json", function(data) {
    $(result).html(data);
    console.log(data.Names[0]); // Outputs Museums
    $.each(data.Names, function(index, value) {
        tags.push(value); // add the tag to your tags list for each item in Names
    });
});

</script>

这样您就可以只存储所需的数据，而且您不需要手动解析HTML。

将HTML明文数据解析为javascript数组

4 个答案: