javascript - jQuery 聚焦元素荧光笔，字符串化属性

Question

我正在尝试编写一个用于辅助功能调试的小脚本，基本上我需要一些东西来告诉我在控制台上哪个元素具有焦点。但我不想知道一切，只想知道 html 上打印的内容。所以 console.log($(this)) 虽然很简单，但并不完全是我想要的。

这是我的代码，第一个函数是获取属性

(function($) {
  var _old = $.fn.attr;
  $.fn.attr = function() {
    var a, aLength, attributes, map;
    if (this[0] && arguments.length === 0) {
            map = {};
            attributes = this[0].attributes;
            aLength = attributes.length;
            for (a = 0; a < aLength; a++) {
                    map[attributes[a].name.toLowerCase()] = attributes[a].value;
            }
            return map;
    } else {
            return _old.apply(this, arguments);
    }
  }
}(jQuery));

$('*').each(function() {
  $(this).on('focus', function() {
    var attributes = JSON.stringify($(this).attr());
    var replaced = attributes
                    .replace(/{|}|,/g,' ')
                    .replace(/:/g, "=")
                    .replace(/"class"/, 'class')
                    .replace(/"id"/, 'id')
                    .replace(/"href"/, 'href')
                    .replace(/"title"/, 'title')
                    .replace(/"target"/, 'target');
    var tag = $(this).prop('tagName').toLowerCase();
    console.log('<'+tag+replaced+'>...</'+tag+'>');
  });
});

如果我的 html 是这样的

<a class="link" id="blue" href="w.com" target="_blank" title="vfs">link</a>

我明白

<a class="link" id="blue" href="w.com" target="_blank" title="vfs">...</a>

这正是我想要的。问题:如您所见，我删除属性周围引号的方式非常糟糕。除非我列出所有可能的属性，否则我会得到不需要的引号。有什么想法吗？也许我需要在字符串化之前删除它们。

https://jsfiddle.net/8xnuepk9/

Answer 1

您不需要搞乱属性。 Cloning节点，然后更改内部 html克隆的将做你想做的事。

$('*').on('focus', function() {
    var clone = $(this).clone();
    clone.html('..')
    console.log(clone[0]);
});

JSFiddle