使用 JavaScript Regex 解析 ad.size 元标记以将宽度/高度解析为整数答案

【问题标题】：Parse ad.size meta tag to parse width / height into integers with JavaScript Regex使用 JavaScript Regex 解析 ad.size 元标记以将宽度/高度解析为整数
【发布时间】：2018-01-26 02:41:11
【问题描述】：

使用 JavaScript，如何从位于我的 HTML 文件 HEAD 部分的元标记中获取广告尺寸的宽度和高度？

在 HTML 文件的 HEAD 中：

<script type="text/javascript">
    // Returns a string "width=160,height=600"
    var dimensionsStr = document.querySelector('meta[name="ad.size"]')['content‌'];

</script>

我怎样才能解析这个字符串来得到：

var width = 160;
var height = 600;

【问题讨论】：

标签： javascript html html-parsing meta-tags

【解决方案1】：

您可以像这样动态地从该内容中提取所有“变量”：

// Returns a string "width=160,height=600"
var dimensionsStr = document.querySelector('meta[name="ad.size"]').content;
var obj = dimensionsStr.split(",").reduce( (obj, s) => {
    var [key, value] = s.match(/[^\s;=]+/g);
    obj[key] = isNaN(value) ? value : +value;
    return obj;
}, {});

console.log(obj);

&lt;meta name="ad.size" content="width=160,height=600"&gt;&lt;/meta&gt;

这样，width 和 height 的顺序是否颠倒也没有关系，或者您在该内容中有其他变量。

【讨论】：

【解决方案2】：

更优雅高效的方式（使用 map 拆分）：

{
  const dimensionsStr = 'width=160,height=600';

  const matched = dimensionsStr.split(',').map(str => parseInt(str.split('=')[1]));
  //[160, 600]

  var [width, heigth] = matched; //ES6 destructuring assignment

  console.log(width, heigth);
  //160 600
}

使用正则表达式：

{
  const dimensionsStr = 'width=160,height=600';

  const matched = dimensionsStr.match(/=(.*?),(.*?)=(.*?)$/)
  //["=160,height=600", "160", "height", "600"]

  const width = parseInt(matched[1]),
        heigth = parseInt(matched[3]);

  console.log(width, heigth);
  //160 600
}

【讨论】：