如何在wordpress中突出显示搜索内容中的特定单词

Question

I want to highlight the search term in the content result in WordPress.

I tried some functions for title, excerpt and content highlight. Title and excerpt working fine but in content its not working fine. it disturb my content layout.

My actual layout is

And after using function for highlight search term in content. It looks like this

The function which i use title highlight is

function search_title() {
$title = get_the_title();
$keys = implode('|', explode(' ', get_search_query()));
$content = strip_tags($content);
$title = preg_replace('/(' . $keys .')/iu', '<strong class="search-highlight">\0</strong>', $title);
echo $title;

}

And the function which i use for content is

function search_content() {
    $content = get_the_content();
    $keys = implode('|', explode(' ', get_search_query()));
    // $content = strip_tags($content);
    $content = preg_replace('/(' . $keys .')/iu', '<strong class="search-highlight">\0</strong>', $content);
    $content = preg_replace('~(?:\[/?)[^/\]]+/?\]~s', '', $content);
    echo '<p>' . $content . '</p>';

}

Its working fine but break my layout.

I tried some of the jquery methods too. but no luck.

Answer 1

Shaban try this code your search.php and remove search_content() from functions.php

Get the search term by this code.

<?php echo $str = esc_html( get_search_query( false ) ); ?>

and then write jquery in same file with contains: function. like this

$( ".content-column:contains('<?php echo $str ?>')" ).css( "background", "Yellow" );

That's it :)

Hope this will help you