javascript - span tags not getting applied after using regular expression -
the following function working , noticing strange behavior. inside $("#mypanel").on('cellclick', function (event), not seeing highlighted class getting applied along span tags. see span tags applied following line of code:
html = html.replace(new regexp(records[i].concept_text, 'ig'), '<span style="color:' + color + ';">' + records[i].concept_text + '</span>');.
for example : <span style="background-color:#f3f315;"><span style="background-color:#f3f315;">myeloma</span></span>.
on other hand, jsfiddle doing same thing works fine here
what issue in code?
this.mydocument = function (data_) { var source = { localdata: data_, datafields: [{ name: 'doc_content', type: 'string' }, { name: 'concept_text', type: 'string' }, { name: 'start', type: 'int' }, { name: 'stop', type: 'int' }], datatype: "array" }; var dataadapter = new $.jqx.dataadapter(source, { loadcomplete: function (records) { var html; var color = '#ff0000'; //get data var records = dataadapter.records; var length = records.length; console.log("checking length: "+length);// outputs 5 (var = 0; < length; i++) { console.log("checking concepts here: " +records[i].concept_text); } html = "<div style='margin: 10px;'><pre>" + records[1].doc_content + "</pre></div>"; (var = 0; < length; i++) { html = html.replace(new regexp(records[i].concept_text, 'ig'), '<span style="color:' + color + ';">' + records[i].concept_text + '</span>'); } $("#doccontentpanel").html(html); }, loaderror: function (xhr, status, error) { }, beforeloadcomplete: function (records) { } }); // perform data binding dataadapter.databind(); $("#mypanel").jqxgrid({ source: dataadapter, width: '122', height: '170', columns: [{ text: 'concept(s)', datafield: 'concept_text', cellsalign: 'center', width: 100 }, { text: 'note content', datafield: 'doc_content', hidden: true } ] }); var panel = $("#doccontentpanel"); var content = panel.html(); panel.jqxpanel({ width: '750', height: '500', scrollbarsize: 20 }); $("#mypanel").on('cellclick', function (event) { var value = event.args.value; // use regular expression account beginning/end of // input, arbitrary whitespace (including line feeds) // adjacent tags var regexp = new regexp('(^|>|\\s)(' + value + ')($|<|\\s)', 'g'); var scrolltop; var highlighted = content.replace( regexp, '$1<span class="highlighted">$2</span>$3' ); console.log ("check highlighted in click handler:" +highlighted); panel.jqxpanel('clearcontent'); panel.jqxpanel('append', highlighted); // offset of last highlighted word relative // panel parent scrolltop = $('.highlighted:last', panel).position().top; // use jqxpanel api scroll word panel.jqxpanel('scrollto', 0, scrolltop); }); }; // end of mydocument function
Comments
Post a Comment