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

Question

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>

Does this answer your question? [how to get value by class name using javascript](https://stackoverflow.com/questions/34207638/how-to-get-value-by-class-name-using-javascript) — mgm793, Nov 02 '21 at 07:10

Andy · Answer 1 · 2021-11-02T07:20:39.850

Access the dataset property for each span with the dx-mention class. Use querySelectorAll to pick up the span elements, and then iterate over them.

dataset will return an object. However, because of the way hyphenated attributes are treated you need to target mentionValue rather than mention-value.

const spans = document.querySelectorAll('.dx-mention');

spans.forEach(span => {
  console.log(span.dataset);
  console.log(span.dataset.mentionValue);
});

<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>

sorry... it should be grabbed from html text string not from html page.. — JaRoi, Nov 02 '21 at 08:05
[Parse the string into an HTML document](https://developer.mozilla.org/en-US/docs/Web/API/DOMParser). The same process applies. — Andy, Nov 02 '21 at 08:08

Carsten Løvbo Andersen · Accepted Answer · 2021-11-02T08:23:27.253

0

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>

edited Nov 02 '21 at 08:23

answered Nov 02 '21 at 07:11

Carsten Løvbo Andersen

26,637
10
47
77

sorry... it should be grabbed from html text string not from html page.. – JaRoi Nov 02 '21 at 08:06
You have shown us html and not any indication about it's a string. @JaRoi Look at my demo, updated with string – Carsten Løvbo Andersen Nov 02 '21 at 08:22

score 0 · Answer 3 · answered Nov 02 '21 at 07:13

0

You can use the following statement

document.querySelector('span.dx-mention').getAttribute('data-mention-value')

if you have multiple "span" elements you can use querySelectorAll and loop the nodes returned by the method.

answered Nov 02 '21 at 07:13

gourav arora

131
6

sorry... it should be grabbed from html text string not from html page.. – JaRoi Nov 02 '21 at 08:05
Ohh then you can create a temporary element with and append you html text inside that using innerHTML that and can perform the operation using element. querySelectorAll – gourav arora Nov 02 '21 at 09:36

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

3 Answers3