当前位置: 面试刷题>> 分割标签 (经典算法题500道)


题目描述补充

题目:分割标签并重构内容

给定一个包含HTML标签的字符串,要求编写一个函数来分割这个字符串中的所有HTML标签(如<div>, <span>, <a>等,但不包括自闭合标签如<br /><img />),并将非标签部分的内容以特定方式(例如,用空格分隔)重新组织起来。同时,忽略标签内的所有属性。

示例输入

"<div>Hello</div><span>World</span><br /><a href='https://www.example.com'>Visit</a>"

期望输出

Hello World Visit

PHP 示例代码

function splitAndReconstructTags($html) {
    // 移除自闭合标签,因为它们不包含内容
    $html = preg_replace('/<[^>]*\/?>/', '', $html); // 注意:这里简单处理,实际上会移除所有标签

    // 提取标签间的文本内容
    preg_match_all('/>([^<]+)</', $html, $matches);

    // 将匹配到的内容连接起来,用空格分隔
    return implode(' ', $matches[1]);
}

// 注意:上面的PHP函数在处理上有局限性,因为它简单去除了所有标签,包括需要的标签。
// 下面是一个更准确的实现,使用DOMDocument处理HTML

function accurateSplitAndReconstruct($html) {
    $dom = new DOMDocument();
    @$dom->loadHTML($html, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD); // 加载HTML
    $xpath = new DOMXPath($dom);

    $textNodes = $xpath->query('//text()[normalize-space(.)!=""]'); // 查找非空白的文本节点
    $result = [];

    foreach ($textNodes as $node) {
        $result[] = $node->nodeValue;
    }

    return implode(' ', $result);
}

// 示例用法
$html = "<div>Hello</div><span>World</span><br /><a href='https://www.example.com'>Visit</a>";
echo accurateSplitAndReconstruct($html); // 输出: Hello World Visit

Python 示例代码

from bs4 import BeautifulSoup

def split_and_reconstruct_tags(html):
    soup = BeautifulSoup(html, 'html.parser')
    texts = [text.strip() for text in soup.strings if text.strip()] # 过滤掉空字符串
    return ' '.join(texts)

# 示例用法
html = "<div>Hello</div><span>World</span><br /><a href='https://www.example.com'>Visit</a>"
print(split_and_reconstruct_tags(html))  # 输出: Hello World Visit

JavaScript 示例代码

function splitAndReconstructTags(html) {
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
    let texts = [];
    
    // 遍历所有文本节点
    doc.body.childNodes.forEach(node => {
        if (node.nodeType === Node.TEXT_NODE && node.nodeValue.trim() !== '') {
            texts.push(node.nodeValue.trim());
        }
    });

    return texts.join(' ');
}

// 示例用法
const html = "<div>Hello</div><span>World</span><br /><a href='https://www.example.com'>Visit</a>";
console.log(splitAndReconstructTags(html)); // 输出: Hello World Visit

码小课网站中有更多关于HTML解析、DOM操作以及正则表达式等相关内容的分享,欢迎大家学习交流。

推荐面试题