Highlight text in Html using jQuery & css

Highlighting text can take immediate attention of readers on any web page. All websites have some important information which they want to highlight so they can take attention of all visitors . We can achieve this using HTML and css or by using jQuery plugin. Text Highlighting using HTML and css is more simple and fast, but sometimes we need to highlight text based on user’s input, then we have to use jQuery text highlight plugin to highlight text. Today we will learn Html highlight text color using  jQuery and css.

Highlight  text using jQuery and CSS

We are going to use csTextHightLight jQuery plugin to highlight text. Lets follow these steps

  1. Add the jQuery library on page
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
  2. Add the csTextHightLight  library on page  
    <script src="path-to/csHightLight.js"></script>

    <

By using csTextHightLight plugin we can pass multiple words at same as array and pass it as list parameter, so lets create an array of  words which we want to highlight on page:

var highlight =['small text','medium text string','very long text string to replace','one more text'];

Now will find element using jQuery in which  we want to find and highlight these text strings and initialize the plugin.  So I will use `body` tag for now, you can use any element according to your requirements:

 $(function () {
$('body').csTextHightLight({
list: highlight
});
});

This will automatically find all words in highlight array and highlight them.

 Customizing text color and background color

If we talk about functionality of csTextHightLight , it find text defined in array and wrap it with span tag so if you want  to add custom class, change text color and background color of highlighted  text you can easily do this by using following code:

 $(function () {
$('body').csTextHightLight({
list:highlight,
color:'#fff',
class:'anotherClass',
background:'#000'
});
});

Highlight text using Html and CSS

There are many ways to highlight text using HTM and CSS, Some are followed:

HTML5 <mark> tag

If your application based on HTML5 then <mark> tag can be a quick and easy way of highlighting or marking text on a page. It can be used something like this:

 Html mark tag can be used to <mark>Highlight text on webpage.</mark>

Highlight text with only HTML code

To highlight text with just HTML code and support for all browsers,we can  set the background-color style to element, for Example:

 Html <span style="background-color:yellow"> text highlight with style tag<span>.

Highlight text with CSS & HTML

You can also create a CSS class and set the “background-color” attribute, as shown in the example code below.

.highlight-it { background-color:#ffff00; }

 

 Html <span class="highlight-it" > text highlight with style class<span>.

 

Thanks for reading, keep sharing.

 

Total Views (316)