jQuery选择器到JSON对象表示

jQuery selector to JSON object representation

本文关键字：对象 表示 JSON 选择器 jQuery      更新时间：2023-09-26

我有兴趣采用jQuery选择器字符串(您放入$()中的东西)并从字符串中指定的所有元素生成JSON对象。我对从DOM中选择不感兴趣。

这种事情必须在jQuery的底层发生，是否有一个公共函数可以用来实现这一点?有没有提供这个功能的开源库?

给定以下输入字符串:

  • input[class=wood][name=cedar]
  • input[class='wood'][name='cedar']
  • input[class="wood"][name="cedar"]

我想返回以下输出:

{
  [
    elementType: 'input',
    attributes: [
      class: 'wood',
      name: 'cedar'
    ]
  ]
}

并且给定以下字符串:

  • input, div
  • input,div

I'd like:

{
  [
    elementType: 'input'
  ],
  [
    elementType: 'div'
  ]
}

如果我必须自己写的话，这是一个相当复杂的正则表达式，我宁愿不重新发明轮子:)

当然可以，

var query = $("input, div")
var selector = [];
query.selector.split(',').forEach(function(element){
 selector.push({"element": element})
});
console.log(selector)

将给你:

[
  {
    elementType: 'input'
  },
  {
    elementType: 'div'
  }
]

下面是一个工作示例

工作原理:

你可以检查任何jQuery选择器对象，你会发现一个名为selector的属性。这是查询的字符串表示形式。只需为所需的JSON结构找到正确的解析器，就完成了。

这是元素和属性的支持，jQuery选择器的语法将使这进一步复杂化。

这是一个jsBin的代码在行动的例子。

var main = {}
main.getAttributes = function (selector) {
  var attributes = selector.match(/('[[^']]*'])/g)
  return _.chain(attributes).map(function (attribute) {
    attribute = attribute.match(/'[(.+)']/)[1]
    attribute = attribute.split('=')
    var key = attribute[0]
    var value = attribute[1].replace(/['"]+/g, '', '')
    return [key, value]
  }).object().value()
}
main.parseSelector = function (selectorStr) {
  var selectors = selectorStr.split(',')
  return _.map(selectors, function (selector) {
    selector = selector.replace(/^'s+|'s$/, '')
    return {
      'elementType': selector.match(/([^'[']]*)/)[0],
      'attributes': main.getAttributes(selector)
    }
  })
}
var selectorStr = 'input[type=checkbox][class=fun]'
var obj = main.parseSelector(selectorStr)
console.log(obj)
相关文章：