如何将Node List元素转为字符串并提取值‘12803’

一、实现元素检测并添加样式 #

当元素sale_info_order_from的内容包含"JDG"时，为invoice_text元素添加绿色粗边框，代码如下：

// 获取目标元素
const saleInfoEl = document.getElementById('sale_info_order_from');
const invoiceTextEl = document.getElementById('invoice_text');

// 检测内容并添加样式
if (saleInfoEl && saleInfoEl.innerHTML.includes('JDG')) {
  invoiceTextEl.style.border = '2px solid green';
  invoiceTextEl.style.fontWeight = 'bold';
}

二、提取目标元素中的数值 #

从querySelectorAll获取的第二个元素中提取copyTextToClipboard('12803')里的"12803"，有两种可靠实现方式：

方法1：解析元素的HTML字符串 #

将元素转为HTML字符串后，用正则匹配目标数值：

// 获取所有onclick以copyTextToClipboard开头的元素
const copyElements = document.querySelectorAll('[onclick^="copyTextToClipboard"]');

// 确保存在第二个元素
if (copyElements.length >= 2) {
  const targetEl = copyElements[1];
  // 转为HTML字符串
  const elHtml = targetEl.outerHTML;
  // 正则匹配括号内的数值
  const valueMatch = elHtml.match(/copyTextToClipboard\('(\d+)'\)/);
  
  if (valueMatch) {
    const extractedValue = valueMatch[1];
    console.log(extractedValue); // 输出：12803
  }
}

方法2：直接解析onclick属性值 #

无需转整个HTML字符串，直接读取onclick属性内容并匹配：

const copyElements = document.querySelectorAll('[onclick^="copyTextToClipboard"]');

if (copyElements.length >= 2) {
  const targetEl = copyElements[1];
  const onclickContent = targetEl.getAttribute('onclick');
  // 匹配单引号内的数值
  const valueMatch = onclickContent.match(/'(\d+)'/);
  
  if (valueMatch) {
    const extractedValue = valueMatch[1];
    console.log(extractedValue); // 输出：12803
  }
}

注意：querySelectorAll返回的是NodeList，索引从0开始，第二个元素对应索引1；正则中的\d+匹配连续数字，若目标值可能包含非数字字符，可调整正则为[^']+匹配单引号间的任意内容。

内容的提问来源于stack exchange，提问作者LukGri