从html字符串文本值[closed]中查找具有相同类名的跨度值

Question

如何在javascript或jQuery中获取带有"dx-提及"的span类的data-tive-value？对不起...它应该从html文本字符串抓取，而不是从html页面...

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

可以使用以下语句

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

如果有多个“span”元素，则可以使用querySelectorAll并循环该方法返回的节点。

Answer 2

你可以这样做：

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

这将返回类选择的两个跨度，并获取它们的数据值。

演示

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>

Answer 3

使用dx-title类访问每个跨度的数据集属性。使用querySelectorAll拾取span元素，然后对其进行迭代。

dataset将返回一个对象。但是，由于连字号属性的处理方式，您需要以提及值为目标，而不是提及值。

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>