如何将XML中换行的文本项转换为HTML列表以正常渲染？

客户在文本框输入数据时按回车键分行，XML文件内每项内容也单独占一行，但页面渲染时所有文本会挤成一行。需要将这些分行内容提取出来，转换成嵌套在<description>标签内的HTML无序列表，示例如下：

原XML内容：

<description>
    Panel Style: Full-View
    R-Value:  None
    Sectional Material:  Heavy Duty/Aluminum
    Insulation Type:  No Insulation
    Color Options:  Aluminum, White, Bronze, Black
</description>

转换后效果：

<description>
    <ul>
        <li>Panel Style:  Full-View</li>
        <li>R-Value:  None</li>
        <li>Sectional Material:  Heavy Duty/Aluminum</li>
        <li>Insulation Type:  No Insulation</li>
        <li>Color Options:  Aluminum, White, Bronze, Black</li>
    </ul>
</description>

常用处理方式 #

1. 前端浏览器端处理（JavaScript） #

如果是在页面渲染时实时转换，可通过JS获取文本内容并生成列表：

// 定位目标description元素
const descElement = document.querySelector('description');
// 按换行分割文本，清理空白并过滤空行
const contentLines = descElement.textContent.split(/\r?\n/)
  .map(line => line.trim())
  .filter(line => line.length > 0);

// 创建ul容器
const listContainer = document.createElement('ul');
// 逐个生成li元素并添加到容器
contentLines.forEach(line => {
  const listItem = document.createElement('li');
  listItem.textContent = line;
  listContainer.appendChild(listItem);
});

// 替换原内容
descElement.innerHTML = '';
descElement.appendChild(listContainer);

2. 后端批量处理（Python） #

如果需要批量处理XML文件，可使用Python的XML解析库完成转换：

import xml.etree.ElementTree as ET

# 加载目标XML文件
tree = ET.parse('target.xml')
root = tree.getroot()

# 遍历所有description标签
for description in root.findall('.//description'):
    # 提取并处理文本行
    rawLines = description.text.strip().split('\n')
    validLines = [line.strip() for line in rawLines if line.strip()]
    # 生成li标签内容
    liTags = [f'        <li>{line}</li>' for line in validLines]
    # 组装完整的ul结构
    ulContent = f'    <ul>\n{"\n".join(liTags)}\n    </ul>'
    # 更新description标签内容
    description.text = '\n' + ulContent + '\n'

# 保存处理后的XML文件
tree.write('processed.xml', encoding='utf-8', xml_declaration=True)

注意事项 #

• 处理时要过滤空行和多余空白，避免生成无效的<li>元素
• 兼容不同系统的换行符（Windows用\r\n，Unix/Linux用\n）
• 若XML中嵌入HTML需保证结构合法，必要时可使用<![CDATA[]]>包裹HTML内容

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