First of all I use Timber (TWIG) with WordPress. That's why there are some differences with only the use of PHP.

I implemented the WordPress search function with a searched word highlighting system (with "mark" js plugin).

Everything works fine however I would like to display the paragraph that contains the search word as an extract.

For example if I use the word "speaker" for my search. I would like to display the paragraph that contains the word "speaker" in the results.

To inject the appropriate paragraph instead of card.article_exceprt ( see full code below) :

<div class="card__content">
    {{ card.article_exceprt }}
</div>

How to do that please ?

script.js

function init_datas_fetch() {
$('#search-form').on('submit', function(e) {
    e.preventDefault();

    var searchValue = $('#search-input').val();

    if (searchValue.length > 0) {
        $.ajax({
            type: 'POST',
            url: '/wp-admin/admin-ajax.php',
            dataType: 'html',
            data: {
                'action' : 'datas_fetch',
                'terms' : searchValue
            },
            success: function(data) {
                $('#fetch-list').html(data);
            },
            error: function(data) {

            }
        });
    } else {
        $('#fetch-list').html('');
    }
});
}

functions.php

add_action( 'wp_ajax_nopriv_datas_fetch', 'datas_fetch' );
add_action( 'wp_ajax_datas_fetch', 'datas_fetch' );

function datas_fetch() {
    $context['page_search'] = true;
    $keywords = isset($_POST['terms']) ? $_POST['terms'] : '';

    $posts_types_selected = array('pages' => 'page', 'articles' => 'post', 'videos' => 'videos', 'podcasts' => 'podcasts');

    $exclude_posts = get_field('search_exclude','option');

    $meta_query = array(
        'relation' => 'OR'
    );

    if (!empty($keywords)) {
        $fields = array(
            'article_exceprt',
            'article_chapeau',
            'blocs_article_$_article_wysiwyg'
        );

        foreach($fields as $field) {
            array_push($meta_query, array(
                'key' => $field,
                'value' => $keywords,
                'compare' => 'LIKE'
            ));
        }
    }

    if ($keywords) {
        $context['posts'] = Timber::get_posts(array(
            'post_type' => array_values($posts_types_selected),
            'post_status' => 'publish',
            'posts_per_page' => -1,
            'paged' => 1,
            'orderby' => 'date',
            'order' => 'DESC',
            'post__not_in' => array_values($exclude_posts),
            'hide_empty' => true,
            'has_password' => FALSE,
            '_meta_or_title' => $keywords,
            'meta_query' => $meta_query
        ));
    } else {
        $context['posts'] = Timber::get_posts(array(
            'post_type' => array_values($posts_types_selected),
            'post_status' => 'publish',
            'posts_per_page' => -1,
            'paged' => 1,
            'orderby' => 'date',
            'order' => 'DESC',
            'post__not_in' => array_values($exclude_posts),
            'hide_empty' => true,
            'has_password' => FALSE
        ));
    }

    Timber::render( 'bloc_fetch.twig', $context );

    die();
}

tpl_search.twig

<form role="search" id="search-form">
    <input type="text" id="search-input" class="search__input" placeholder="{{ __('Rechercher des articles, vidéos...', 'cmd') }}" value="">
    <input type="submit" id="search-submit" class="search__button" value="Rechercher">
</form>

<div id="fetch-list">
 {% include "bloc_fetch.twig" %}
</div>

bloc_fetch.twig

{% for card in posts %}
    <div class="card">
        <img src="{{ card.thumbnail.src }}" class="card__visual" alt="{{ card.thumbnail.alt }}">
        <a href="{{ card.link }}" class="card__link"></a>
        <div class="card__content">
            {{ card.article_exceprt }}
        </div>
    </div>
{% endfor %}