从给定的HTML字符串中提取data-av-id属性的值

要从给定的HTML字符串中提取data-av-id​属性的值，您可以使用JavaScript中的DOM解析方法或者正则表达式。这里我将展示两种方法：

1. 使用DOM解析 - 将字符串转换成DOM元素，然后查询该元素的属性。
2. 使用正则表达式 - 直接从字符串中提取所需的数据。

方法 1: 使用DOM解析

function getDataAvIdFromHtml(htmlString) {
  // 创建一个DOMParser对象
  const parser = new DOMParser();
  // 解析HTML字符串
  const doc = parser.parseFromString(htmlString, 'text/html');
  // 获取div元素
  const divElement = doc.querySelector('div');
  // 返回data-av-id的值
  return divElement.getAttribute('data-av-id');
}

const htmlString = '<div data-type="NodeAttributeView" data-av-id="20240805125954-4xjld4y" data-av-type="table"></div>';
console.log(getDataAvIdFromHtml(htmlString));  // 输出: 20240805125954-4xjld4y

方法 2: 使用正则表达式

function getDataAvIdFromHtml(htmlString) {
  // 使用正则表达式匹配data-av-id的值
  const match = htmlString.match(/data-av-id="([^"]+)"/);
  if (match && match[1]) {
    return match[1];  // 返回匹配的值
  }
  return null;  // 如果没有找到匹配项，则返回null
}

const htmlString = '<div data-type="NodeAttributeView" data-av-id="20240805125954-4xjld4y" data-av-type="table"></div>';
console.log(getDataAvIdFromHtml(htmlString));  // 输出: 20240805125954-4xjld4y

这两种方法都可以有效地提取出data-av-id​的值。如果您只需要简单地从字符串中提取值，那么使用正则表达式可能更为简洁快速。如果您的应用场景更为复杂，可能涉及到解析更多的HTML结构，那么使用DOM解析会更加灵活可靠。