如何在不破壞結構的情況下突出顯示 HTML 中的搜尋結果？

如何在 preg_replace 中排除 HTML 標籤

提供的程式碼嘗試使用 preg_replace 來反白字串中的搜尋結果。然而，字串中 HTML 標籤的存在帶來了挑戰，因為替換操作無意中標記了標籤本身，從而破壞了 HTML 結構。

解決方案：採用基於 DOM 的方法

正規表示式並不是解析 HTML 的理想工具。相反，請考慮使用 DOM（文檔物件模型）和 DOMXPath 來導覽字串的 XML 結構。

DOMXPath 可讓您搜尋包含特定文字的元素，而忽略 XML 元素。這允許您隔離相關的文字節點並將它們包裝在所需的跨度標籤中。

程式碼實作

以下程式碼示範如何實作此方法：

$doc = new DOMDocument;
$doc->loadXML($str);
$xp = new DOMXPath($doc);

// Search elements containing the search text
$r = $xp->query('//*[contains(., "'.$search.'")]/*[FALSE = contains(., "'.$search.'")]/..', $anchor);

// Process search results
foreach($r as $i => $node)
{
    // Extract search text nodes and create suitable nodes if necessary
    $range = new TextRange($xp->query('.//child::text()', $node));
    $ranges = array();
    while(FALSE !== $start = strpos($range, $search))
    {
        $base = $range->split($start);
        $range = $base->split(strlen($search));
        $ranges[] = $base;
    };

    // Wrap matching text nodes
    foreach($ranges as $range)
    {
        foreach($range->getNodes() as $node)
        {
            $span = $doc->createElement('span');
            $span->setAttribute('class', 'search_hightlight');
            $node = $node->parentNode->replaceChild($span, $node);
            $span->appendChild($node);
        }
    }
}

此程式碼搜尋包含搜尋文字的元素，忽略不包含它的任何子元素。搜尋區域表示為 TextRange 對象，允許在匹配文字周圍插入跨度標籤。結果是修改後的 XML 字串，其中突出顯示搜尋結果，而不會破壞 HTML 結構。

以上是如何在不破壞結構的情況下突出顯示 HTML 中的搜尋結果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！