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

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

Want to improve this question? As written, this question is lacking some of the information it needs to be answered. If the author adds details in comments, consider editing them into the question. Once there's sufficient detail to answer, vote to reopen the question.

Closed 4 years ago.

Improve this 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 — mgm793
– mgm793, Commented Nov 2, 2021 at 7:10

Andy · Accepted Answer · 2021-11-02 07:20:39Z

1

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>

edited Nov 2, 2021 at 7:20

answered Nov 2, 2021 at 7:15

Andy

63.6k13 gold badges72 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JaRoi Over a year ago

sorry... it should be grabbed from html text string not from html page..

Andy Over a year ago

Parse the string into an HTML document. The same process applies.

Carsten Løvbo Andersen · Accepted Answer · 2021-11-02 08:23:27Z

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 2, 2021 at 8:23

answered Nov 2, 2021 at 7:11

Carsten Løvbo Andersen

27.1k10 gold badges53 silver badges80 bronze badges

2 Comments

JaRoi Over a year ago

sorry... it should be grabbed from html text string not from html page..

Carsten Løvbo Andersen Over a year ago

You have shown us html and not any indication about it's a string. @JaRoi Look at my demo, updated with string

gourav arora · Accepted Answer · 2021-11-02 07:13:02Z

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 2, 2021 at 7:13

gourav arora

1316 bronze badges

2 Comments

JaRoi Over a year ago

sorry... it should be grabbed from html text string not from html page..

gourav arora Over a year ago

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

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

2 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

2 Comments

Linked

Related