如何使用JavaScript或jQuery从HTML文本串中提取dx-mention类span的data-mention-value

架构老林

2026-9-27

核心实现思路

不需要把HTML字符串插入到当前页面渲染，仅在内存中创建临时DOM节点解析字符串结构，即可提取目标属性值，不会影响现有页面状态。

方案1：原生JavaScript实现

// 待解析的HTML文本字符串
const htmlStr = `<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>`;

// 创建内存中的临时DOM容器
const tempContainer = document.createElement('div');
// 传入HTML字符串，浏览器自动完成DOM解析
tempContainer.innerHTML = htmlStr;

// 选中所有class为dx-mention的span标签
const mentionNodes = tempContainer.querySelectorAll('span.dx-mention');
// 提取data-mention-value属性值
const mentionValues = Array.from(mentionNodes).map(node => node.dataset.mentionValue);

console.log(mentionValues); // 输出结果：['AgnesGan', 'AK']

方案2：jQuery实现

// 待解析的HTML文本字符串
const htmlStr = `<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>`;

// 用jQuery直接解析HTML字符串为jQuery对象
const $html = $(htmlStr);
// 筛选目标元素并提取属性
const mentionValues = $html.find('span.dx-mention').map(function () {
  return $(this).data('mention-value');
}).get();

console.log(mentionValues); // 输出结果：['AgnesGan', 'AK']