解析 ad.size 元标记以使用 JavaScript 正则表达式将宽度/高度解析为整数

Question

如何使用 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;

Answer 1

更优雅高效的方式（使用 split with 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
}

Answer 2

您可以像这样动态地从该内容中提取所有 "variables"：

// 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);

<meta name="ad.size" content="width=160,height=600"></meta>

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

解析 ad.size 元标记以使用 JavaScript 正则表达式将宽度/高度解析为整数

Parse ad.size meta tag to parse width / height into integers with JavaScript Regex

html

javascript

html-parsing

meta-tags