我的关注JSFiddle基本上有jqxGrid 交通方式单列，而jqxPanel位于其左侧，其中一些文字内容包含字词这些都在运输方式专栏中。
现状：
当用户点击列的单元格值时，单击的单词会在段落中突出显示。这种方法的问题在于，它突出了我不想要的专栏中的所有单词。在文本内容中可能存在我想要仅突出显示特定单词而不是段落中出现的所有单词的情况。
我有可用的jSON数据，其中start列中的每个字词都有stop和Modes of Transportation个字符偏移值，例如，如下所示：
{
"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
}]
}
其中，doc_content是我在JS Fiddle中提供的文本内容（JSON的不同之处只是出于测试目的）。
我的目标：
如何将start列中的stop和Modes of Transportation值与文字内容中的特定字词相关联？有没有办法，Rangy图书馆可以在这里拍照？我看到了Rangy Range文档，但看起来它们正在根据用户选择生成起始和结束字符偏移。如果我已经有start和stop个字符偏移值，我就无法找到任何具体的操作，如上面JSON中所示。请指教。感谢
答案 0 :(得分：0)
解决问题的关键部分是：
start＆amp; stop）执行字符串替换（使用String.prototype.substring）注意：如果您在开头处理文本，它会移动下一个单词的索引 当你引入其他字符（html标记）。
要实现此目的，您需要组织Web服务返回的原始Json数据。 您应该将每个单词的出现重新组合在一起，并通过减少位置对它们进行排序。
// 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);
});
使用提供的start和stop标识了每个单词，现在每个单词都可通过其id属性进行识别，因此您可以使用此单词仅突出显示
你想要的（不是所有的同时）