javascript - Search and highlight in html with multiple keywords as a single string -

-

in javascript, given html string tags like: this string has different fonts.

<b>this</b> <i>string</i> <span style="background-color: rgb(212, 239, 181);">has</span> <b>different</b> <i>fonts</i>.

when user searches search term multiple words "different fonts".

how can add highlighting make html string like:

<b>this</b> <i>string</i> <span style="background-color: rgb(212, 239, 181);">has</span> <span class="highlight">     <b>different</b>     <i>fonts</i> </span>.

please note search term treated single string if words in quote, cannot search , highlight each word individually.

utilize innerhtml + str.replace in javascript

start placing div around content.

<div id='content'>

set content variable in javascript.

var xyz = document.getelementbyid("content").innerhtml;

explode users search array , use javascripts str.replace filter through content variable.

var needle = document.getelementbyid("needle").innerhtml; var splitarray = str.split(" "); (var = 0; < splitarray.length; i++) {     /* code below mentioned later */     xyz = str.replace("<span class='highlight'>" + splitarray[i] + "</span>", splitarray[i]);  }

set replace text to: 

"<span class='highlight'>" + /* needle (see above) */ + "</span>"

to keep them consecutive, go through xyz string , replace span tags 3 character replacements:

var replaces = xyz.replace("</span>", "~/s"); var replaces = replaces.replace("<span class='bold'>", "~/b");

then loop through string using indexof. if there split array has index of previous split array.length + 7 know consecutive. 7 comes space between words + 3 character replacement made start , end spans: 7 = 3 + 1 + 3

var countr = 0; // create loop here      var indxstr = replaces.indexof(splitarray[0],countr);     if (replaces.indexof(splitarray[1] == (indxstr.length + 7) {         // far!     } else {          // previous index , add 1 (so not repeat)         countr = replaces.indexof(indxstr) + 1;     } // end loop here

where put "create loop here" want loop can find multiple occurrences of string (indexof gets first, why used countr variable avoid previous search). "good far" comment continue on same style of loop, loop handle 2 words "different fonts" should there 3 "has different fonts" need loop counts per word -> 

for (var q = 0; q < splitarray.length; q++) {     if (q > 1) {         if (replaces.indexof(splitarray[q] == (splitarray[q - 1].length + 7) {          }     } } else {     // use original code above splitarray[1] , indxstr } // etc~

Comments

Post a Comment

Popular posts from this blog

php - render data via PDO::FETCH_FUNC vs loop -

-
i've been using 2 methods render data. the first one: function name($id,$name){ return '<div id="'.$id.'">'.$name.'</div>'; } echo implode($pdo->query("select id,name user")->fetchall(pdo::fetch_func,'name')); the second one: $users = $pdo->query("select id,name user")->fetchall(pdo::fetch_obj); foreach($users $user){ echo name($user->id,$user->name); } i don't understand how pdo::fetch_func works. tried figure out. however, not well-documented. could please explain fetch mode? , also, 1 performs better? thank you. both methods wrong , have learn how use templates , how separate business logic presentation logic. $users = $pdo->query("select id,name user")->fetchall(pdo::fetch_obj); tpl::assign('users', $users); is code business logic part. then in template <?php foreach $users $row): ?> <div id="<?=$...
Read more

c++ - OpenCV Error: Assertion failed <scn == 3 ::scn == 4> in unknown function, -

-
i read alot other solution still confused should mine... #include <opencv2/objdetect/objdetect.hpp> #include <opencv2/highgui/highgui.hpp> #include <opencv2/imgproc/imgproc.hpp> #include <iostream> #include <stdio.h> using namespace std; using namespace cv; int main(int argc, const char** argv) { //create cascade classifier object used face detection cascadeclassifier face_cascade; //use haarcascade_frontalface_alt.xml library face_cascade.load("haarcascade_frontalface_alt.xml"); //setup video capture device , link first capture device videocapture capturedevice; capturedevice.open(0); //setup image files used in capture process mat captureframe; mat grayscaleframe; //create window present results namedwindow("outputcapture", 1); //create loop capture , find faces while (true) { //capture new image frame capturedevice >> captureframe; ...
Read more

The canvas has been tainted by cross-origin data in chrome only -

-
uncaught securityerror: failed execute 'getimagedata' on 'canvasrenderingcontext2d': canvas has been tainted cross-origin data i getting above error in chrome. code(following) works fine in mozilla. have not corss domain issue. why above error in chrome? var wheel_canvas, wheel_context, can_w, can_h, wheel_grd; var large_radius = 160; var small_radius = 120; var wheel_canvas = document.getelementbyid('wheel_canvas'); var wheel_context = wheel_canvas.getcontext('2d'); var can_w = $(wheel_canvas).width(); var can_h = $(wheel_canvas).height(); var centerx = can_w / 2, centery = can_h / 2; var wheel_grd = null; test('#ff0000'); function test(hex) { $('#clrpicker').css({'left': 210, 'top': 210 }); inverted = hexbw(hex); $('#color_val_show').val(hex); current_color_hex_val_selected = hex; $('#color_val_show').css({'color':inverted,'background':hex}); fillgradient...
Read more