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>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>