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

Question

我有以下 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 中有所不同，只是为了测试目的）。

我的目标：

我怎样才能link 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 属性来识别，因此您可以使用它来仅突出显示一个你想要（不是同时全部）

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

deciding on what and how to use for character offsets

javascript

jquery

json

rangy