The jQuery find and replace feature is causing my entire content to be replaced instead of just specific paragraphs

Question

The jQuery find and replace feature is causing my entire content to be replaced instead of just specific paragraphs

Within this section, there are multiple paragraphs and an input field. The concept is simple: the user inputs text into the box, then hits "ENTER" to trigger a jquery function below.

The process involves identifying matches between the paragraph content and the user input. When a match is found, the paragraph's HTML is essentially updated with a span element wrapping the matching text. This allows for easy CSS styling to highlight the matched text.

However, a current issue I'm facing is that when the text is replaced, it affects all instances of that specific HTML element type on the entire page. It may be challenging to explain in words, so feel free to explore the behavior using this provided fiddle. Enter easily identifiable text and observe the outcome.

Is there a way to regenerate the text element by element instead of duplicating every instance?

<input type="text" id="searchbox">
<p>Let's get some text to test</p>
<p>This is another paragraph</p>

function searchHighlight(searchText){
    if(searchText){
        // Variable declaration for question content
        var content = $('p').text();

        // Variable declaration for search phrase
        var searchExp = new RegExp(searchText, "ig");

        // Variable declaration for match identification
        var matches = content.match(searchExp);

        // If text is found within the QUESTION, proceed as follows...
        if(matches){
            $("p").html(content.replace(searchExp, function(match){
                return "<span class='selected'>" + match + "</span>";
        }))
    }
    else{
        $("#searchbox").css("border", "1px solid red")
    }
}

Access the demo through this link: https://jsfiddle.net/awv5r1f0/1/

javascript jquery html css

Answer 1

Answer №1

To get the desired outcome, use the following approach with the 'each' method to search for a specific word and replace it in the p html tag.

Problem: Using $("p").html() will update all p tags and replace them with the same text.

Update by iterating through all the p elements
Use $(this).html to update only the p element containing the matching word

$("p").each(function() {
    $(this).html($(this).text().replace(searchExp, function(match) {
        return "<span class='selected'>" + match + "</span>";
    }))
})

Sample code

$(function() {
    // Add event listener for pressing enter key in the searchbox
    $("#searchbox").on("keydown", function(event) {
        if (event.which == 13) {
            // Call the searchHighlight function
            searchHighlight($(this).val())
        }
    })
})

function searchHighlight(searchText) {
    if (searchText) {
        var content = $('p').text();
        var searchExp = new RegExp(searchText, "ig");
        var matches = content.match(searchExp);
        
        if (matches) {
            $("p").each(function() {
                $(this).html($(this).text().replace(searchExp, function(match) {
                    return "<span class='selected'>" + match + "</span>";
                }))
            })
        } else {
            $("#searchbox").css("border", "1px solid red")
        }
    }
}

.selected{
  background: yellow;
  font-weight: 700;
}
#searchbox{
  border: 1px solid #ccc;
  outline: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="searchbox">
<p>Let's get some text to test</p>
<p>This is another paragraph</p>

Answer 2

To get the desired outcome, use the following approach with the 'each' method to search for a specific word and replace it in the p html tag.

Problem: Using $("p").html() will update all p tags and replace them with the same text.

Update by iterating through all the p elements
Use $(this).html to update only the p element containing the matching word

$("p").each(function() {
    $(this).html($(this).text().replace(searchExp, function(match) {
        return "<span class='selected'>" + match + "</span>";
    }))
})

Sample code

$(function() {
    // Add event listener for pressing enter key in the searchbox
    $("#searchbox").on("keydown", function(event) {
        if (event.which == 13) {
            // Call the searchHighlight function
            searchHighlight($(this).val())
        }
    })
})

function searchHighlight(searchText) {
    if (searchText) {
        var content = $('p').text();
        var searchExp = new RegExp(searchText, "ig");
        var matches = content.match(searchExp);
        
        if (matches) {
            $("p").each(function() {
                $(this).html($(this).text().replace(searchExp, function(match) {
                    return "<span class='selected'>" + match + "</span>";
                }))
            })
        } else {
            $("#searchbox").css("border", "1px solid red")
        }
    }
}

.selected{
  background: yellow;
  font-weight: 700;
}
#searchbox{
  border: 1px solid #ccc;
  outline: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="searchbox">
<p>Let's get some text to test</p>
<p>This is another paragraph</p>

Answer 3

Answer №2

Although it may not be the perfect solution, I believe it meets your requirements. The issue was that you were altering the html of every p element you had, not just the one where the word was matched.

To address this, I utilized an each method to scan all the p elements and insert a span where the match occurred. This approach would function effectively even if there are multiple paragraphs (p) containing the match.

Refer below for the implementation:

$(function() {
  // Create event for enter key in searchbox
  $("#searchbox").on("keydown", function(event) {
    if (event.which == 13) {
      // execute searchHighlight function
      searchHighlight($(this).val())
    }
  })
})

function searchHighlight(searchText) {
  if (searchText) {
    // Declare variable content to store question content
    var content = $('p').text();

    // Define searchExp variable for search phrase
    var searchExp = new RegExp(searchText, "ig");

    // Variable to hold found matches
    var matches = content.match(searchExp);

    // Perform actions when text is found in QUESTION
    $('p').each(function() {
      if ($(this).text().match(searchExp)) {
        $(this).html($(this).html().replace(searchExp, function(match) {
          return "<span class='selected'>" + match + "</span>";
        }))
      } else {
        $("#searchbox").css("border", "1px solid red")
      }
    })
  }
}

.selected {
  background: yellow;
  font-weight: 700;
}

#searchbox {
  border: 1px solid #ccc;
  outline: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="searchbox">
<p>Let's get some text to test</p>
<p>This is another paragraph</p>

Answer 4

Although it may not be the perfect solution, I believe it meets your requirements. The issue was that you were altering the html of every p element you had, not just the one where the word was matched.

To address this, I utilized an each method to scan all the p elements and insert a span where the match occurred. This approach would function effectively even if there are multiple paragraphs (p) containing the match.

Refer below for the implementation:

$(function() {
  // Create event for enter key in searchbox
  $("#searchbox").on("keydown", function(event) {
    if (event.which == 13) {
      // execute searchHighlight function
      searchHighlight($(this).val())
    }
  })
})

function searchHighlight(searchText) {
  if (searchText) {
    // Declare variable content to store question content
    var content = $('p').text();

    // Define searchExp variable for search phrase
    var searchExp = new RegExp(searchText, "ig");

    // Variable to hold found matches
    var matches = content.match(searchExp);

    // Perform actions when text is found in QUESTION
    $('p').each(function() {
      if ($(this).text().match(searchExp)) {
        $(this).html($(this).html().replace(searchExp, function(match) {
          return "<span class='selected'>" + match + "</span>";
        }))
      } else {
        $("#searchbox").css("border", "1px solid red")
      }
    })
  }
}

.selected {
  background: yellow;
  font-weight: 700;
}

#searchbox {
  border: 1px solid #ccc;
  outline: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="searchbox">
<p>Let's get some text to test</p>
<p>This is another paragraph</p>

The jQuery find and replace feature is causing my entire content to be replaced instead of just specific paragraphs

Answer №1

Answer №2

Similar questions

I need clarification on some basic concepts about ajax - Can you help?

Building HTML tables with JQuery for handling large datasets of over 4,000 rows and beyond

Having issues with Node.js POST requests not functioning properly

Tips for creating a fixed element with ScrollTrigger and GSAP

How can HTML and CSS be linked to display images independently?

Checking to see if the prop 'isChecked' has been modified

Refreshing a Next.js page results in a 404 error

The Req.session array is limited to storing just one element at a time

Issue with vue-template-compiler in Vue.js 3 webpack configuration

leveraging a callback function alongside the useState hook

How can I adjust a centered container div to fit properly on a mobile device

Clicking on a jQuery element will reveal a list of corresponding elements

jQuery AJAX call with datePicker function is functional on all browsers except for Internet Explorer versions 6 and 7

How to show a picture stored in a MySQL database using PHP

Creating Dynamic Web Design: Horizontal Scrolling Window and Adaptive HTML Content

Tips for submitting by simply choosing an option from a dropdown using jQuery?

I am attempting to implement a feature that changes the color of buttons when they are clicked within an ng-repeat loop

The issue with IE rendering shadows and how it relates to jQuery

Troubleshooting: Issue with v-link to classname in Vue.js

Ordering tables in jQuery with both ascending and descending options