Tengo un campo que realmente busca en javascript y muestra los resultados, pero los resultados aparecen individualmente. Quiero mostrarlo de todo el artículo con el color cambiado a rojo.
código
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>Intente devolver el resultado completo de la sustitución en lugar de crear la matriz y unirla más tarde.
es decir
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>