jQuery 选择器到 JSON 对象表示

Posted 2023-02-22

【中文标题】jQuery 选择器到 JSON 对象表示

【英文标题】：jQuery selector to JSON object representation

【发布时间】：2015-12-21 14:24:50

【问题描述】：

我有兴趣获取一个 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

我想要：

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

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

【问题讨论】：

您始终可以创建内存中的 html 元素。该元素 是 具有属性和值的 HTMLElement 对象。比你可以说的this.food = "soup" 等，但你必须建立你自己。

但我希望您意识到type > wood 和food > soup 都是无效 元素属性。

这就是为什么我指定我没有从 DOM 中选择。出于示例的目的，这无关紧要。如果你喜欢@RokoC.Buljan，我可以在属性前面加上data-。

我想你可能在问一个 XY 问题。你到底在做什么？如果您解释一下您要做什么，我在问原因 - 可能有一个比您最初认为最好的解决方案更好的解决方案。

@RokoC.Buljan 这不是一个 XY 问题。我想使用现有的 jQuery 选择器语法创建全新的东西。

【参考方案1】：

当然可以：

var query = $("input, div")
var selector = [];

query.selector.split(',').forEach(function(element)
 selector.push("element": element)
);

console.log(selector)

会给你：

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

这是一个有效的example

这是如何工作的：

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

【讨论】：

谢谢你，但这不是我要找的。我或多或少需要完整的 jQuery 选择器，例如您在此处拥有的单个元素，但我还需要属性选择器，并且在我的问题的第一个示例中。这是一个更难编写的正则表达式。我从.+\[(.+)\] 开始，并意识到我不想从头开始发明整个东西。

【参考方案2】：

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

这是运行代码的 jsBin Example。

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)