用JS解析HTML字符串

在前端开发中，经常需要对HTML字符串进行解析和操作。本文将介绍如何使用JavaScript解析HTML字符串，并提供实际的示例代码。

JavaScript解析HTML字符串的方法

方法一：使用innerHTML属性

JavaScript的innerHTML属性可以将HTML字符串转换为DOM元素，从而可以通过DOM API进行操作。以下是一个简单的示例：

const htmlStr = '<div><p>Hello, world!</p></div>';
const container = document.createElement('div');
container.innerHTML = htmlStr;
document.body.appendChild(container);

这段代码首先创建了一个包含HTML字符串的变量htmlStr，然后创建了一个空的div元素作为容器。接着，将HTML字符串赋给容器的innerHTML属性，这会自动将HTML字符串转换成一个DOM树。最后，将容器添加到文档中，这样页面就会显示出Hello, world!字样。

方法二：使用DOMParser API

另一种解析HTML字符串的方法是使用JavaScript的DOMParser API。以下是一个示例代码：

const htmlStr = '<div><p>Hello, world!</p></div>';
const parser = new DOMParser();
const doc = parser.parseFromString(htmlStr, 'text/html');
const container = doc.querySelector('div');
document.body.appendChild(container);

这段代码首先创建了一个包含HTML字符串的变量htmlStr，然后创建了一个DOMParser对象。接着，调用parseFromString方法将HTML字符串传递给DOMParser对象进行解析。最后，通过querySelector方法获取到解析后的DOM树中的div元素，并将其添加到文档中。

解析HTML字符串的注意事项

无论使用哪种方法解析HTML字符串，都需要注意以下几点：

1. HTML字符串中必须包含完整的标记。如果标记不完整，那么解析器可能会产生错误。
2. HTML字符串必须符合HTML规范。否则，解析器可能无法正确解析。
3. 解析出的DOM元素可以直接插入到文档中，但要注意与现有的DOM元素冲突。

示例代码

下面是一个更复杂的示例代码，它演示了如何从一个包含表格数据的HTML字符串中提取出数据，并用JavaScript渲染成一个表格。

HTML字符串：

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>30</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <td>Jane Doe</td>
      <td>25</td>
      <td>jane@example.com</td>
    </tr>
  </tbody>
</table>

JavaScript代码：

const htmlStr = '<table>...</table>';
const parser = new DOMParser();
const doc = parser.parseFromString(htmlStr, 'text/html');
const table = doc.querySelector('table');

const thead = table.querySelector('thead');
const tbody = table.querySelector('tbody');
const ths = Array.from(thead.querySelectorAll('th')).map(th => th.textContent);
const data = Array.from(tbody.querySelectorAll('tr')).map(tr =>
  Array.from(tr.querySelectorAll('td')).map(td => td.textContent)
);

const tableEl = document.createElement('table');
const theadEl = document.createElement('thead');
const tbodyEl = document.createElement('tbody');
const trEl = document.createElement('tr');
ths.forEach(th => {
  const thEl = document.createElement('th');
  thEl.textContent = th;
  trEl.appendChild(thEl);
});
theadEl.appendChild(trEl);
tableEl.appendChild(theadEl);

data.forEach(rowData => {
  const trEl = document.createElement('tr');
  rowData.forEach(cellData => {
    const tdEl = document.createElement('td');
    tdEl.textContent = cellData;
    trEl.appendChild(tdEl);
  });
  tbodyEl.appendChild(trEl);
});
tableEl.appendChild(tbodyEl);
document.body.appendChild(tableEl);

这段代码首先使用方法二解析HTML字符串

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/9683