CODEWITHSUNDEEP
javascript
PISHOY MORIS
PISHOY MORIS

Reputation: 61

Change color of words in a paragraph that matches a search term

I have a field that really searches in javascript and shows the results, but the results appear individually. I want to show it from the entire article with the color changed to red

code

var string  = document.getElementById("one").innerHTML;
var elDemo  = document.getElementById("one"); 

function getPortions(queryString, string) {
  var results = [];
  if(queryString.length > 0){
    var rgxp = new RegExp("(\\S*)?("+ queryString +")(\\S*)?", "ig");
    string.replace(rgxp, function(match, $1, $2, $3){
      results.push( ($1||"") +"<b>"+ $2 +"</b>"+ ($3||"") );
    });
  }
  return results;
}

document.getElementById("txt1").addEventListener("input", function(){
  var result = getPortions(this.value, string);
  elDemo.innerHTML = result.join(" "); 
});
<input type="search"class="form-control" id="txt1" placeholder="search" aria-label="Username" aria-describedby="basic-addon1">

<div id="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis accusantium facilis facere et ipsum quas itaque voluptatum similique at autem ullam quidem magni error maxime laborum nihil optio cupiditate, magnam fuga. Expedita, aliquam dignissimos veniam cupiditate assumenda nesciunt quod perferendis, rem dolor harum ipsa ullam. Nihil similique voluptate mollitia veniam!</div>

Upvotes: 2

Views: 285

Answers (1)

JBaczuk
JBaczuk

Reputation: 14589

Try returning the entire result of the replace rather than creating the array and joining later.

i.e.

return string.replace(rgxp, (match) => "<b style=\"color: red;\">"+ match +"</b>")


var string  = document.getElementById("one").innerHTML;
var elDemo  = document.getElementById("one"); 

function getPortions(queryString, string) {
  var results = [];
  if(queryString.length > 0){
    var rgxp = new RegExp("(\\S*)?("+ queryString +")(\\S*)?", "ig");
    return string.replace(rgxp, (match) => "<b style=\"color: red;\">"+ match +"</b>")
  }
  return results;
}

document.getElementById("txt1").addEventListener("input", function(){
  if (!this.value) {
    elDemo.innerHTML = string
    return
  }
  var result = getPortions(this.value, string);
  elDemo.innerHTML = result;
});
<input type="search" reauired class="form-control" id="txt1" placeholder="search" aria-label="Username" aria-describedby="basic-addon1">
<div id="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis accusantium facilis facere et ipsum quas itaque voluptatum similique at autem ullam quidem magni error maxime laborum nihil optio cupiditate, magnam fuga. Expedita, aliquam dignissimos veniam cupiditate assumenda nesciunt quod perferendis, rem dolor harum ipsa ullam. Nihil similique voluptate mollitia veniam!</div>

Upvotes: 2

Related Questions