决定使用什么以及如何使用字符偏移

Question

我关注 JSFiddle，它基本上有 jqxGrid 和 交通方式 单列，jqxPanel 在它的左侧，其中包含一些包含在模式中的单词的文本内容运输专栏。

现状：

当用户单击列的单元格值时，单击的单词会在段落中突出显示。这种方法的问题在于，它突出显示了列中我不想要的所有单词。文本内容中可能存在我只想突出显示特定单词而不是段落中出现的所有单词的情况。

我有可用的 jSON 数据，其中包含 Modes of Transportation 列中每个单词的 start 和 stop 字符偏移值，例如，如下所示：

{
    "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 中不同，只是为了测试目的）。

我的目标：

如何将Modes of Transportation 列中的start 和stop 值与文本内容中的特定单词相关联？有没有办法，Rangy 库可以在这里出现？我看到了Rangy Range 文档，但看起来他们正在根据用户选择生成开始和结束字符偏移量。如果我已经有 start 和 stop 字符偏移值，如 JSON 中所示，我找不到任何具体的操作。请指教。谢谢

Answer 1

解决您的问题的关键部分是：

• 最后处理您的文本
• 根据文本中的每个单词索引（start & stop）执行字符串替换（使用String.prototype.substring）

注意：如果你从头开始处理你的文本，它会移动下一个单词的索引 当您引入其他字符（html 标记）时。

要实现这一点，您需要组织您的网络服务返回的原始 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 属性进行识别，因此您可以使用它仅突出显示一个 你想要（不是所有的同时）