javascript - 即时修改元素，使其匹配给定的选择器

Question

假设我有这样的元素:

<div class="some-class"></div>

和选择器如:

#mydiv.super.another-class[some-attribute="true"]

---

我想让我的 div 匹配这个选择器。这需要

• 添加 id mydiv
• 添加类 super, another-class
• 添加值为 true 的属性 some-attribute

所以最终的 div 看起来像

<div class="some-class super another-class" id="mydiv" some-attribute="true"></div>

有没有办法做类似的事情

$(".some-class").makeMatch('#mydiv.super.another-class[some-attribute="true"]');

这会解析选择器并为任何有效的选择器执行上面列出的步骤吗？

我知道我可以做一些函数来解析选择器并执行它，但是选择器可能非常复杂并且相同的选择器可能以多种不同的方式组合，所以我决定尝试找到一些可靠的现有解决方案。

你知道类似的东西吗，或者有什么本地方法吗？

---

编辑:根据评论，我将尝试以不同方式解释我的问题。

问题的要点是:

是否可以使用 javascript 解析任何有效的选择器以了解它指向的 ID、类和属性？

所以我们会喜欢

var selectorData = parseSelector('#my-id.class-one.class-two[attr-one="value-one"]');
selectorData.id //my-id
selectorData.classes //class-one class-two
selectorData.attributes["attr-one"] //value

因为有了关于选择器的这些数据，所以很容易让任何元素匹配它。

Answer 1

一种可能的方法是:

// create a jQuery plug-in, 'makeMatch()' and pass a selector
// string as an argument:
(function ($) {
    $.fn.makeMatch = function (selector) {
        // finding a string of one or more alphanumeric characters,
        // underscores and hyphens that starts with the '#' character,
        // using String.prototype.match() with a regular expression:
        var id = selector.match(/#[\w-]+/),
            // similar to the above, though this string starts with a
            // period (escaped with a back-slash because the period
            // is a special character in regular expressions), using
            // the 'g' (global) flag to retrieve all matching
            // sequences:
            classes = selector.match(/\.[\w-]+/g),
            // this string looks for strings starting with a '['
            // (again escaped because it's a special character) and
            // continuing until it matches a character that is *not*
            // ']':
            attributeValuePairs = selector.match(/\[[^\]]+/g);
        // if we have an 'id' sequence:
        if (id) {
            // assigning the found id sequence to the id variable
            // (preventing us from accessing a property of a null
            // object) after replacing the leading '#' character
            // with an empty string:
            id = id[0].replace(/^#/,'');
        }

        // iterating over the passed-in jQuery object, 'this' (here)
        // is the collection of nodes:
        return this.each(function () {
            // caching the current node found in the collection:
            var self = this;

            // if we have an id (it's not null):
            if (id) {
                // setting the id to that matched-id:
                self.id = id;
            }
            // if we have an array of classes:
            if (classes) {
                // adding the classes from the array, by joining
                // each class-string together with spaces and replacing
                // the period characters (though we could simply do:
                // classes.replace(/\./g,' ') instead):
                $(self).addClass(classes.join(' ').replace(/\./g, ''));
            }
            if (attributeValuePairs) {
                // creating a variable to avoid re-initialising a
                // variable within the forEach():
                var av;
                attributeValuePairs.forEach(function(avp) {
                    // replacing the initial '[' character from
                    // each element of the array with an empty string
                    // and splitting that string on the '=' character
                    // to form a two-part array (if a '=' character
                    // is found):
                    av = avp.replace(/^\[/, '').split('=');
                    // if we do have a two-part array:
                    if (av.length === 2) {
                      // setting the attribute held in 'av[0]' with
                      // the value held in 'av[1]' (after replacing
                      // any quotes held in that string):
                      self.setAttribute(av[0], av[1].replace(/"|'/g, ''));
                    }
                });
            }
        });
    };
})(jQuery);

(function($) {
  $.fn.makeMatch = function(selector) {
    var id = selector.match(/#[\w-]+/),
      classes = selector.match(/\.[\w-]+/g),
      attributeValuePairs = selector.match(/\[[^\]]+/g);
    if (id) {
      id = id[0].replace(/^#/,'');
    }
    return this.each(function() {
      var self = this;
      if (id) {
        self.id = id;
      }
      if (classes) {
        $(self).addClass(classes.join(' ').replace(/\./g, ''));
      }
      if (attributeValuePairs) {
        var av;
        attributeValuePairs.forEach(function(avp) {
          av = avp.replace(/^\[/, '').split('=');
          if (av.length === 2) {
            self.setAttribute(av[0], av[1].replace(/"|'/g, ''));
          }
        });
      }
    });
  };
})(jQuery);


$(".some-class").makeMatch('#mydiv.super.another-class[some-attribute="true"]');

div {
  border: 1px solid #000;
  width: 200px;
  height: 200px;
}

#mydiv.super.another-class[some-attribute="true"] {
  border: 2px solid red;
  background: transparent url(http://lorempixel.com/200/200/nightlife) 50% 50% no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="some-class"></div>

但值得注意的是，我没有解决 bool 属性/属性(例如checked、selected 等)或添加功能的问题没有值的属性。这是可以做到的，我只是还没有时间来解释这种功能可能暗示的所有边缘情况。

引用资料:

• JavaScript:
  • > Array.prototype.forEach() .
  • > Array.prototype.join() .
  • > Element.setAttribute() .
  • > JavaScript Regular Expressions Guide .
  • > String.prototype.match() .
  • > String.prototype.replace() .
• jQuery:
  • > addClass() .
  • > each() .
  • “How to create a basic [jQuery] plugin 。”