Please help me to improve dynamic HTML page which gives availability to search tiles by substrings. There is code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Tiles with Search and Highlighting</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }
        input[type="text"] {
            width: 95%;
            padding: 10px;
            margin-bottom: 20px;
            font-size: 16px;
        }
        .tiles {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
        }
        .tile {
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 15px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s;
        }
        .tile:hover {
            transform: scale(1.05);
        }
        .highlight {
            background-color: blue; /* Highlight color */
            font-weight: bold;
        }
    </style>
</head>
<body>

<h1>Search Tiles</h1>
<input type="text" id="searchInput" placeholder="Search for tiles..." onkeyup="filterTiles()">

<div class="tiles" id="tilesContainer">
    <!-- Dynamic tiles will be populated here -->
</div>

<script>
    // Sample data: an array of paragraphs
    const paragraphs = [
        "This is the first tile.",
        "Here is the second tile.",
        "Tile number three is different.",
        "This is the fourth idea.",
        "Fifth tile, not very interesting.",
        "Here's another tile for good measure.",
        "The seventh tile contains different content.",
        "Eighth tile showcases something unique.",
        "Ninth tile is about JavaScript.",
        "Tenth tile focuses on dynamic content."
    ];

    // Function to render tiles with highlighted search terms
    function renderTiles(filteredParagraphs, searchTerm) {
        const tilesContainer = document.getElementById('tilesContainer');
        tilesContainer.innerHTML = '';
        filteredParagraphs.forEach(paragraph => {
            const tile = document.createElement('div');
            tile.className = 'tile';
            tile.innerHTML = highlightText(paragraph, searchTerm);
            tilesContainer.appendChild(tile);
        });
    }

    // Function to highlight the search term in the paragraph
    function highlightText(text, searchTerm) {
        if (!searchTerm) return text; // Return unmodified text if no search term
        const regex = new RegExp(`(${searchTerm})`, 'gi'); // Create regex for case-insensitive matching
        return text.replace(regex, '<span class="highlight">$1</span>'); // Highlight match
    }

    // Function to filter tiles based on search input
    function filterTiles() {
        const searchInput = document.getElementById('searchInput').value.toLowerCase();
        const filteredParagraphs = paragraphs.filter(paragraph =>
            paragraph.toLowerCase().includes(searchInput)
        );

        renderTiles(filteredParagraphs, searchInput); // Pass the search term for highlighting
    }

    // Initial render of all tiles
    renderTiles(paragraphs, '');
</script>

</body>
</html>

Make search more complex: if search field contains commas, they will be interpreted as logical OR. Trim spaces after splitting. Take attention to highlight all substrings. In your answer write only what needs to be changed in the code