I have following JSFiddle which basically has jqxGrid with Modes of Transportation single column and jqxPanelon the left side of it with some text content containing words which are there in the Modes of Transportation column.
Current Situation:
When a user clicks on the cell value of the column, the clicked word gets highlighted in the paragraph. The problem with this approach is that, it is highlighting all the words in the column which I don't want. There can be scenario in the text content where I want to highlight only specific words and not all the words present in the paragraph.
I have jSON data available which has the start and stop character offsets values for each of the words present in the Modes of Transportation column as for example,shown below:
{
"webservice_status": {
"status": "SUCCESS",
"message": ""
},
"documentContent": [{
"webservice_status": null,
"id": "4321",
"wordTo_highlight": "Car",
"document_id": 678767,
"date_value": "2016-04-27",
"doc_content": " Company Name:Car Transportation\n\n id: 000004321\n\n Vehicle Report\n\n\nExcellent Condition: Z-77-7654 Received Date/Time: 4/27/2016 13:02 CDT\n Collected Date/Time: 4/27/2016 13:02 CDT\n\n\n Sedan Final Report- 4/28/2016 14:38 CDT -\n\n CASE: Z-77-7654\n\n Company Name:Car Transportation\n\n id: 000004321\n\n Vehicle Report\n\n\nExcellent Condition: Z-77-7654 Received Date/Time: 4/27/2016 13:02 CDT\n Collected Date/Time: 4/27/2016 13:02 CDT\n\n",
"stop": 645,
"start": 638
}, {
"webservice_status": null,
"id": "4321",
"wordTo_highlight": "Bus",
"document_id": 678767,
"date_value": "2016-04-27",
"doc_content": " Company Name:Car Transportation\n\n id: 000004321\n\n Vehicle Report\n\n\nExcellent Condition: Z-77-7654 Received Date/Time: 4/27/2016 13:02 CDT\n Collected Date/Time: 4/27/2016 13:02 CDT\n\n\n Sedan Final Report- 4/28/2016 14:38 CDT -\n\n CASE: Z-77-7654\n\n Company Name:Car Transportation\n\n id: 000004321\n\n Vehicle Report\n\n\nExcellent Condition: Z-77-7654 Received Date/Time: 4/27/2016 13:02 CDT\n Collected Date/Time: 4/27/2016 13:02 CDT\n\n",
"stop": 2890,
"start": 2883
}, {
"webservice_status": null,
"id": "4321",
"wordTo_highlight": "Car",
"document_id": 678767,
"date_value": "2016-04-27",
"doc_content": " Company Name:Car Transportation\n\n id: 000004321\n\n Vehicle Report\n\n\nExcellent Condition: Z-77-7654 Received Date/Time: 4/27/2016 13:02 CDT\n Collected Date/Time: 4/27/2016 13:02 CDT\n\n\n Sedan Final Report- 4/28/2016 14:38 CDT -\n\n CASE: Z-77-7654\n\n Company Name:Car Transportation\n\n id: 000004321\n\n Vehicle Report\n\n\nExcellent Condition: Z-77-7654 Received Date/Time: 4/27/2016 13:02 CDT\n Collected Date/Time: 4/27/2016 13:02 CDT\n\n",
"stop": 1156,
"start": 1149
}, {
"webservice_status": null,
"id": "4321",
"wordTo_highlight": "Train",
"document_id": 678767,
"date_value": "2016-04-27",
"doc_content": " Company Name:Car Transportation\n\n id: 000004321\n\n Vehicle Report\n\n\nExcellent Condition: Z-77-7654 Received Date/Time: 4/27/2016 13:02 CDT\n Collected Date/Time: 4/27/2016 13:02 CDT\n\n\n Sedan Final Report- 4/28/2016 14:38 CDT -\n\n CASE: Z-77-7654\n\n Company Name:Car Transportation\n\n id: 000004321\n\n Vehicle Report\n\n\nExcellent Condition: Z-77-7654 Received Date/Time: 4/27/2016 13:02 CDT\n Collected Date/Time: 4/27/2016 13:02 CDT\n\n",
"stop": 2970,
"start": 2963
}, {
"webservice_status": null,
"id": "4321",
"wordTo_highlight": "Airways",
"document_id": 678767,
"date_value": "2016-04-27",
"doc_content": " Company Name:Car Transportation\n\n id: 000004321\n\n Vehicle Report\n\n\nExcellent Condition: Z-77-7654 Received Date/Time: 4/27/2016 13:02 CDT\n Collected Date/Time: 4/27/2016 13:02 CDT\n\n\n Sedan Final Report- 4/28/2016 14:38 CDT -\n\n CASE: Z-77-7654\n\n Company Name:Car Transportation\n\n id: 000004321\n\n Vehicle Report\n\n\nExcellent Condition: Z-77-7654 Received Date/Time: 4/27/2016 13:02 CDT\n Collected Date/Time: 4/27/2016 13:02 CDT\n\n",
"stop": 3744,
"start": 3737
}]
}
where, doc_content is the text content that I have it in my JS Fiddle (It's different in JSON just for testing purpose).
My Goal:
How can I link the start and stop values in the Modes of Transportation column with the specific words in the text content? Is there a way, Rangy library can come into picture here? I saw Rangy Range documentation but it looks like they are generating start and end character offsets based on user selection. I couldn't find anything specific to what to do if I already have start and stop character offsets values as shown above in the JSON. Please advise. Thanks
The key parts to solve your problem are:
start & stop) in the textNote: if you process your text by the beginning, it will shift the indexes of the next words as you introduce additional characters (html markup).
To achieve this, you will need to organize your raw Json data returned by your webservice. You should regroup the occurrences of each word together and sort them by decreasing positions.
// Organize you data by word and sort by decreasing position to get something like this:
var items = [
{
wordTo_highlight: "Test",
positions: [
{start: 44, stop: 47},
{start: 0, stop: 3}
],
doc_content: "Test text for a proof of concept...just for Test purpose"
},
{
wordTo_highlight: "elements",
positions: [
{start: 38, stop: 45},
{start: 28, stop: 35},
{start: 5, stop: 12}
],
doc_content: "Some elements to highlight: elements, elements"
}
];
function _getHighlightMarkup(word, position) {
return '<span class="highlight" ' +
'id="' + position.start + '-' + position.stop + '">' +
word +
'</span>'
}
// Iterate over all items above to build one text version for each distinct word
// and display it in the debugger console
items.forEach(function(item) {
var docContent = item.doc_content;
item.positions.forEach(function(position) {
docContent = docContent.substring(0, position.start) +
_getHighlightMarkup(item.wordTo_highlight, position) +
docContent.substring(position.stop + 1);
});
console.log(docContent);
});
Each word has been identified using the provided start and stop and each word is now identifiable by its id attribute, so you can use this to highlight only the one
you want (not all of them at the same time)