기본적으로 교통의 <em>모드의 모드에가있는 단어를 포함하는 텍스트 콘텐츠와 그것의 왼쪽에</em> 단일 열 및 <code>jqxPanel</code>와 <code>jqxGrid</code>을 가지고 내가 <a href="https://jsfiddle.net/eg9nccde/7/" rel="nofollow">JSFiddle</a> 다음 한

Question

문자 오프셋을 사용하는 무엇을 어떻게 결정 교통 열.

현재 상황은 :

사용자가 열의 셀 값을 클릭, 클릭 된 단어는 단락으로 표시됩니다. 이 접근 방식의 문제점은 필자가 원하지 않는 컬럼의 모든 단어를 강조 표시한다는 것입니다. 단락에있는 모든 단어가 아니라 특정 단어 만 강조 표시하려는 텍스트 내용의 시나리오가있을 수 있습니다.

I는 예로서 Modes of Transportation 컬럼에 존재하는 단어들의 각각에 대해 start 및 stop 문자 오프셋 값을 갖는 JSON 데이터를 사용할 수 있고, 다음과 같이 :

{ 
    "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 피들 (테스트 목적으로 JSON이 다르다.)에있다.

내 목표 :

가 어떻게 텍스트 내용에 특정 단어로 Modes of Transportation 열에서 start 및 stop 값을 연결할 수 있습니까? 방법이 있습니까, Rangy 도서관은 여기에 그림을 올릴 수 있습니까? Rangy Range 설명서를 보았지만 사용자 선택에 따라 시작 및 종료 문자 오프셋을 생성하는 것처럼 보입니다. JSON에 위와 같이 start 및 stop 문자 오프셋 값이 이미있는 경우 수행 할 작업과 관련된 특정 항목을 찾을 수 없습니다. 제발 조언. 감사합니다

Answer 1

당신의 문제를 해결하기 핵심 부품은 다음과 같습니다 말

• 과정 텍스트
• 수행 문자열 교체에서 각 단어의 인덱스 (start & stop)에 따라 (String.prototype.substring 사용) 텍스트

참고 : beginni 다음 문자 (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 속성에 의해 지금 식별 할 시간)