HTML 요소에 여러 지표를 삽입하려면 어떻게해야합니까?

-2

배경 :
나는 프런트 엔드 용 JavaScript/jQuery/HTML/CSS와 백엔드 용 루비/레일즈를 사용하여 하이라이트를 캡처하고 유지할 수있는 기능을 구현 중입니다. 배열 (예 : [[<start_highlight_index >,<end_highlight_index >],…])에 중첩되어있는 데이터베이스의 강조 표시를 유지하는 기능을 이미 만들었습니다. 그러나 여전히 페이지로드시 기존 하이라이트를로드하는 기능을 구현해야합니다.HTML 요소에 여러 지표를 삽입하려면 어떻게해야합니까?

간체 예 :
다음과 같은 요소를 만들 수있는 가장 좋은 방법은 무엇 단락 요소 <p>Hello world</p> 및 [[1,4],[6,10]]의 배열을 감안할 때 : 스팬이 "안녕하세요"를 강조하기 위해 삽입 된 것을

가

<p><span style="background-color:yellow">Hello</span> <span style="background-color:yellow">world</span></p>

주와 "세계". 이를 구현하는 방법은 여러 가지가 있지만, 페이지 로딩 시간을 최소한으로 유지하려면 효율적인 방법에 대한 제안을 듣는 것이 좋습니다.

출처

2016-09-23 lgants

작동 자바 스크립트 코드입니다. 그게 네 일이야. 우리는 (어쩌면) 당신이 쓴 것을 끝내기 위해 여기에 있습니다. –

작성한 코드 시도가 보이지 않음 –

본인은이 게시물의 작성자입니다. 실제로는 제 일이 아닙니다. 저는 프로그래밍에 익숙하지 않습니다. 그리고 이것은 제가 재미있게 만드는 프로젝트입니다. 디자인과 알고리즘과 관련된 질문을하는 것이 왜이 사이트에서 부적절한 지 알 수 없습니다. – lgants

여기에 좋은 시작이 될 것입니다 코드 작성 목적

$(document).ready(function(){ 
    var content = $("p").html(); 
    var arr = [[1,4],[6,10]]; 
    var newHTML = ""; 
    prevIndex = 0; 
    arr.forEach(function(item){ 
    newHTML += content.substring(prevIndex, item[0]); 
    newHTML += '<span style="background-color:yellow">' + content.substring(item[0], item[1]) + '</span>'; 
    prevIndex = item[1]; 
    }); 
    newHTML += content.substring(prevIndex, content.length); 
    $("#ptag").html(newHTML); 
});

출처

2016-09-23 19:23:34

HTML 요소에 여러 지표를 삽입하려면 어떻게해야합니까?

답변

관련 문제