Как вернуть значение атрибута в функцию фильтра jquery

Question

Как вернуть значение атрибута matched, используя функцию фильтра jquery? Я попытался ниже, он возвратил объект, а не значение атрибута.

  var htmlBlock = '<div data-user-mode="CURRENT_MODE_USER" data-user-mode-key="b577ghf"></div>';  
    if(htmlBlock.match("data-user-mode") && htmlBlock.match("CURRENT_MODE_USER")){
    	var matching = $(htmlBlock).filter(function(){
    		return $(this).attr('data-user-mode-key');
    	});
    	$("input#indexMode").val(matching);
    	console.log("matching", matching);
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

На основе одного attr

var htmlBlock = '<div class="row"><div data-user-mode="CURRENT_MODE_USER" data-user-mode-key="b577ghf"></div>hello<p>hi</p><div></div><div>';  
        if(htmlBlock.match("data-user-mode") && htmlBlock.match("CURRENT_MODE_USER")){
        	var matching = $(htmlBlock).attr('data-user-mode-key');
        	$("input#indexMode").val(matching);
        	console.log("matching", matching);
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

Если ваш HTML может иметь несколько элементов, имеющих этот атрибут, или атрибут находится во вложенном элементе, то действуйте так:

var htmlBlock = '<div data-user-mode="CURRENT_MODE_USER" data-user-mode-key="b577ghf"></div>';
var $matches = $("<div>").append(htmlBlock).find("[data-user-mode=CURRENT_MODE_USER]");
var values = $.map($matches, function(elem) {
    return $(elem).attr("data-user-mode-key");
});
if (values.length) {
    // Uncomment if you need to put this array as string in an input box
    // $("input#indexMode").val(values);
    console.log("matching", values);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

Вам не нужно filter, просто получите attr:

var htmlBlock = '<div data-user-mode="CURRENT_MODE_USER" data-user-mode-key="b577ghf"></div>';
if (htmlBlock.match("data-user-mode") && htmlBlock.match("CURRENT_MODE_USER")) {
  var matching = $(htmlBlock).attr('data-user-mode-key');
  $("input#indexMode").val(matching);
  console.log("matching", matching);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Для поиска нескольких элементов требуется анализ htmlBlock для DOM:

var htmlBlock = `
<div data-user-mode="CURRENT_MODE_USER" data-user-mode-key="aaaaaa"></div>
<div data-user-mode="CURRENT_MODE_USER" data-user-mode-key="bbbbbb"></div>
<div data-user-mode="NO_CURRENT_MODE" data-user-mode-key="cccccc"></div>
`;

var parser = new DOMParser();
var doc = parser.parseFromString(htmlBlock, 'text/html');

doc.querySelectorAll('[data-user-mode="CURRENT_MODE_USER"]')
  .forEach(e => console.log("matching", e.getAttribute('data-user-mode-key')));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>