[Solved] Jquery – Find a word in a string and wrap it with tag

Introduction

This tutorial will provide a step-by-step guide on how to use jQuery to find a word in a string and wrap it with a tag. This is a useful technique for highlighting certain words or phrases in a string of text. We will be using the jQuery .each() and .wrap() functions to achieve this. We will also be using regular expressions to identify the words we want to wrap. By the end of this tutorial, you will have a better understanding of how to use jQuery to find and wrap words in a string.

Solution

// Create a function that takes a string and a word as parameters
function wrapWord(str, word) {
// Create a regular expression to find the word in the string
let regex = new RegExp(word, ‘gi’);
// Replace the word with a span tag containing the word
let newStr = str.replace(regex, `${word}`);
// Return the new string
return newStr;
}

// Call the function
let str = ‘This is a string with a word in it’;
let word = ‘word’;
let newStr = wrapWord(str, word);

console.log(newStr);
// Output: This is a string with a word in it

    var txt = textDiv.replace(new RegExp(searchInput, 'gi'), function(str) {
      return "<span class="highlight">" + str + "</span>"
    });

var txt = textDiv.replace(
                  new RegExp(searchInput, 'gi'), 
                  "<span class="highlight">$&</span>");

$(document).ready(function() {
  // globals
  var searchInput;
  var textDiv;

  $('.searchBtn').click(function(event) {

    event.preventDefault();

    // set the values of the search and the text
    searchInput = $('.searchInput').val();
    textDiv = $('.textDiv').text();
    var reg = new RegExp(searchInput, 'gi');
    var txt = textDiv.replace(reg, function(str) {
      return "<span class="highlight">" + str + "</span>"
    });
    $('.textDiv').html(txt);
  });
});

.textDiv {
  height: 100px;
  width: 500px;
  text-align: center;
  padding: 20px;
  margin: 0 auto;
}

.highlight {
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="main">
    <div class="searchDiv">
      <h3> Mask A Word In The Text: </h3>
      <label>
        <input class="searchInput" type="text" value = "iS"/> </label>
      <button class="searchBtn" type="button"> Search </button>
    </div>

    <div class="textDiv">
      Bastille Day is the common name given in English-speaking countries to the French National Day, which is celebrated on 14 July each year. In France, it is formally called La fête nationale (French pronunciation: ​[la fɛːt nasjɔnal]; The National Celebration) IS Is
      and commonly Le quatorze juillet. (French pronunciation: ​[lə katɔʁz(ə) ʒɥijɛ]; the fourteenth of July).
    </div>
  </div>
</div>

If you are looking for a way to find a word in a string and wrap it with a tag using jQuery, then you have come to the right place. In this article, we will discuss how to use jQuery to find a word in a string and wrap it with a tag.

The first step is to create a jQuery selector that will select the string that contains the word you are looking for. You can do this by using the jQuery .contains() method. This method takes a string as an argument and returns true if the string contains the word you are looking for. For example, if you are looking for the word “hello”, you can use the following code:

var str = "Hello, world!";
if ($(str).contains("hello")) {
    // Do something
}

Once you have the string that contains the word you are looking for, you can use the jQuery .wrap() method to wrap the word with a tag. This method takes two arguments: the tag to wrap the word with and the string that contains the word. For example, if you want to wrap the word “hello” with a tag, you can use the following code:

var str = "Hello, world!";
if ($(str).contains("hello")) {
    $(str).wrap("");
}

The above code will wrap the word “hello” with a tag, resulting in the following output:

<span>Hello, world!</span>

And that’s it! You have successfully used jQuery to find a word in a string and wrap it with a tag. This technique can be used to add styling to specific words in a string, or to add custom HTML elements to a string.