2011-12-13 20 views
0

제 질문을 진행하기 전에이 사이트를 검색하여 질문이 이미 게시되었는지 확인합니다. 비슷한 질문을하지만 그 중 아무 것도 내 필요를 해결하지 못했습니다. 그래서 여기에서 묻습니다.js에 텍스트 줄 바꿈

나는 span 태그로 묶인 내 텍스트의 각 문자 사업부에서 텍스트가 :

Text = A quick brown fox jumps 

<div id="span_text"> 
<span>A</span><span>&nbsp;</span><span>q</span><span>u</span><span>i</span><span>c</span><span>k</span><span>&nbsp;</span><span>b</span><span>r</span><span>o</span><span>n</span><span>&nbsp;</span><span>f</span><span>o</span><span>x</span><span>&nbsp;</span><span>j</span><span>u</span><span>m</span><span>p</span><span>s</span> 
</div> 

문제는 각 문자는 span 태그로 묶여 있기 때문에 단어 주위을 포장하지 않는 것입니다. 스팬 내에 문자가있는 동안 MS Word 및 다른 편집기에서 텍스트를 감쌀 수있는 방법이 있습니까 ???

왜 각 문자를 스팬으로 묶어야합니까? 사실 저는 기초적인 타이핑 교사입니다. 언제든지 키를 누를 때마다 : (1) 하이라이트 문자는 유효한 문자가 입력 된 경우 회색으로 표시됩니다. (2) 하이라이트 잘못된 문자를 입력하면 문자가 빨간색으로 표시됩니다. (3) 입력 할 다음 문자를 강조 표시합니다. 초록색

각 문자를 대상으로하려면 각 범위를 묶어서 각 범위에 고유 한 ID를 부여하여 jQuery를 통해 선택해야합니다. 희망이 이유를 설명하십시오.

감사

+0

그들은 모두 스스로 외로워하지 않습니다 ... : 아래는 내가 사용하고있는 기본 논리는? –

+0

각 편지가 스팬에 있어야하는 이유는 무엇입니까? 더 나은 해결 방법이있을 수 있습니다. –

+0

"마우스 푸드", 내 질문을 업데이트하고 스팬 태그의 각 문자를 묶는 이유를 설명합니다. –

답변

0

그들이 거기에있을 필요가없는 경우 사업부에서 그들을 얻을?

div에 넣으려는 항목을 넣으시겠습니까?

2

<span>&nbsp;</span>이 정말로 필요합니까?

스팬에서 1 문자를 감싸는 것을 피할 수 있다면 잘 자르면됩니다. 나는 왜 당신이 아닌 공간을 비파괴하거나 자바 스크립트로 액세스 할 필요가 상상할 수 없다. 그렇게한다면 왜?

다른 문자는 스팬 내에 있지만 괜찮 으면 &nbsp;을 밖으로 옮길 수 있고 스팬으로 감싸지 않았다고 생각합니다.

+0

'+ 1' - 그리고 내가 실제로 이것을 확인했습니다 : http://jsfiddle.net/PkeG5/ –

+0

안녕하세요 "alivehour", 방금 내 질문에 왜 내가 스팬 각 문자를 묶는 이유를 설명 업데이 트했습니다 . –

0

이 시도 :

(function() { 
    var a = document.getElementById("span_text"); 
    a.innerHTML = a.innerHTML.replace(/<\/span><span>/g, "\n").replace(/<\/?span>/g, ""); 
    a.style.whiteSpace = "pre"; 
    a.style.width = "1.5em"; 
    a.style.overflow = "scroll"; 
}()); 
0

는 의견을 검토 한 결과, 마침내 "범위"태그에 각 문자를 둘러싸없이했다. 나는 두 개의 경간을 만들었다. 하나는 입력 된 문자 용이고 다른 하나는 현재 문자 용입니다. 각 키 이벤트에서 현재 HTML을 업데이트 된 HTML로 바꾸어 div 콘텐츠를 업데이트합니다.

var Text = "The quick brown fox jumps over the lazy dog. It was dark and quiet in the room."; 
var ChTyped = 0; // Number of characters typed so far 

function update(){ 
    var StringTyped = Text.substr(0, ChTyped); 
    var StringCurrent = '<span class="l-active">' + Text.substr(ChTyped, 1) + '</span>'; 
    var StringRemaining = Text.substr(ChTyped+1); 
} 

$("#typingbox").on('keyup', function(e){ 
    ChTyped++; 
    update(); 
}); 

이 여러분 모두 감사합니다

1
function GetWrapedText(text, maxlength) {  
    var resultText = [""]; 
    var len = text.length;  
    if (maxlength >= len) { 
     return text; 
    } 
    else { 
     var totalStrCount = parseInt(len/maxlength); 
     if (len % maxlength != 0) { 
      totalStrCount++ 
     } 

     for (var i = 0; i < totalStrCount; i++) { 
      if (i == totalStrCount - 1) { 
       resultText.push(text); 
      } 
      else { 
       var strPiece = text.substring(0, maxlength - 1); 
       resultText.push(strPiece); 
       resultText.push("<br>"); 
       text = text.substring(maxlength - 1, text.length); 
      } 
     } 
    } 
    return resultText.join(""); 
}