Find span values with same class name from html string text value [closed]

How to get data-mention-value of span classes with “dx-mention” in javascript or jquery? sorry… it should be grabbed from html text string not from html page..

<p>
  <span class="dx-mention" spellcheck="false" data-marker="@" data-mention-value="AgnesGan" data-id="AgnesGan">
    <span contenteditable="false">
      <span>@</span>
      AgnesGan
    </span>
  </span> 
  <span class="dx-mention" spellcheck="false" data-marker="@" data-mention-value="AK" data-id="AK">
    <span contenteditable="false">
      <span>@</span>AK
    </span>
  </span>
</p>

Answer

You could do it like this:

$('.dx-mention').map(function() {
  return $(this).attr("data-mention-value")
}).get()

This will return both spans that is selected by the class, and get their data value.

Demo

var string = `<p><span class="dx-mention" spellcheck="false" data-marker="@" data-mention-value="AgnesGan" data-id="AgnesGan"><span contenteditable="false"><span>@</span>AgnesGan</span>
  </span> <span class="dx-mention" spellcheck="false" data-marker="@" data-mention-value="AK" data-id="AK"><span contenteditable="false"><span>@</span>AK</span>
  </span>
</p>`

var log = $('.dx-mention', string).map(function() {
  return $(this).attr("data-mention-value")
}).get()
console.log(log)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>