如何使用HTML/CSS/jQuery将<div>元素转换为<tr><td>表格元素结构

方案1：前端JavaScript字符串替换（浏览器端渲染时处理） #

如果是在前端拿到数据后渲染表格，直接用字符串正则匹配提取内容再封装即可：

• 基础匹配逻辑：用正则提取<div>和</div>之间的内容，再包裹<tr><td>标签
• 示例代码：

const rawData = `<div>你拿到的原始数据内容</div>`
// 提取div内的内容
const dataContent = rawData.replace(/^<div>(.*?)<\/div>$/, '$1')
// 封装为目标结构
const tableRow = `<tr><td>${dataContent}</td></tr>`

如果单条数据对应多列，只需要根据实际数据分割规则拆分dataContent后，分别包裹<td>标签即可

方案2：后端字符串处理（服务端返回前预处理） #

不同后端语言的处理逻辑和前端一致，都是正则提取内容后重新拼接，以Python为例：

import re

raw_data = "<div>原始数据内容</div>"
data_content = re.search(r'^<div>(.*?)<\/div>$', raw_data).group(1)
table_row = f"<tr><td>{data_content}</td></tr>"

方案3：批量文本替换（静态数据处理场景） #

如果是静态批量处理现有数据，直接用编辑器的正则替换功能：

• 查找规则填：<div>(.*?)<\/div>
• 替换规则填：<tr><td>$1</td></tr>
  主流编辑器如VS Code、Sublime、Notepad++都支持正则替换操作

特殊场景适配 #

如果div内部还嵌套了其他html标签，只需要调整正则的匹配范围，或者用对应语言的HTML解析器（比如前端的DOMParser、Python的BeautifulSoup）提取内部文本，避免正则匹配错误。
比如用DOMParser处理带嵌套标签的场景：

const rawData = `<div><p>带嵌套的内容</p><span>其他内容</span></div>`
const parser = new DOMParser()
const doc = parser.parseFromString(rawData, 'text/html')
const dataContent = doc.querySelector('div').innerHTML // 或者.innerText取纯文本
const tableRow = `<tr><td>${dataContent}</td></tr>`

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