자바 스크립트가 왼쪽 꺾쇠 괄호를 출력하지 않습니다.

페이지에 '타이핑 텍스트 효과'를 생성하는 코드가 있습니다. 즉, 자바 스크립트는 문자열을 입력하고 입력되는 것처럼 보이게 출력합니다. 데모 코드를 here에서 가져 왔습니다.자바 스크립트가 왼쪽 꺾쇠 괄호를 출력하지 않습니다.

문제는 HTML 코드를 출력하고 싶습니다. - 날 떠나, 때로는 완벽하게 작동하지만, 다른 시간이 처음 왼쪽 꺾쇠 괄호를 표시하지 않습니다 크롬에서

<html> 
<body> 
Something here etc etc... 
</body> 
</head>

이 오히려 이상한 방식으로 작동합니다 화면의 출력은 무언가 같이해야한다 출력은 '<html>'이 아닌 'html>'입니다. 사파리에서는 왼쪽 꺽쇠 괄호가 전혀 표시되지 않습니다. 브래킷 대신 유니 코드를 사용하여 '<'을 사용하여 여러 가지를 시도했지만 동일한 결과로 끝나는 것으로 보인다.

Here은 코드의 요지이며, here은 실제 동작을 보여주는 bl.ocks 페이지입니다. 나는 jsfiddle를 만들려고했지만 제대로 실행하지 못했습니다. 미안 해요!

도움이 많이 되었기 때문에 나를 괴롭혔습니다.

$span.append(thisLine[letterIndex].replace(/</g,'&lt;').replace(/>/g,'&gt;'));

이 때 때문에 작동합니다 건배 닉

출처

2013-07-12 NickF

bl.ocks 페이지 예제를 볼 때 문제가 발생합니까? 나는 약 10 번 시도해 보았고, Chrome v27에서 매번 제대로 작동했습니다. –

예제 페이지도 나를 위해 작동했습니다 (Chrome). – nnnnnn

@nnnnnn 나는 태그를 실제로 표시하지 않고 HTML로 렌더링하려는 것으로 읽은 것 같아요. 내 잘못. IE10에서 데모 bl.ocks 예제를 테스트 한 결과 작동했습니다. – crush

대신

$span.append(thisLine[letterIndex]);

는 문자열을 대체 할 수있는, 아래의 호감의 의견에 따라,

$span.text($span.text() + thisLine[letterIndex]);

시도하거나 HTML 태그를 표시하려면 0을 사용해야합니다. < 및 >이 아닌및 >을 입력하십시오. 그렇지 않으면 브라우저가 실제 HTML 태그를 넣은다고 생각합니다. jquery text 메서드는 자동으로 대괄호를 이스케이프 처리하고, 두 번째 예에서는 문자열을 append으로 전달하기 전에 대체 문자열을 처리합니다.

출처

2013-07-12 12:07:00 Abraham

더 나은 해결책은'thisLine [letterIndex]'를 추가하기 전에 이스케이프하는 것입니다 ... – crush

@crush 감사합니다! – Abraham

아하,이게 작동하는 것 같아! 왜 이것이 작동하고 이전 코드가 확장되지 않았습니까? – NickF

코드에 '<'이 '&', 'l', 't', ';'같이 추가 된 것으로 보입니다. 확인되지 않았지만 시도해 볼 수 있습니다.

function typeLetter(lineIndex, letterIndex, $span, line, callback) { 
    var thisLine = line; 
    var thisLength = line.length; 
    var chunk=''; 

    // add the letter 
    chunk=thisLine[letterIndex]; 
    if ('&'==thisLine[letterIndex]) { 
     for (var i=1; i<5; i++) { 
      letterIndex++; 
      chunk+=thisLine[letterIndex]; 
      if (';'==thisLine[letterIndex] || letterIndex>=thisLength-1) break; 
     } 
    } 
    $span.append(chunk); 
    ...

출처

2013-07-12 12:13:47 symcbean

아, 그것은 문자로 검색하므로 사실입니다. – crush

자바 스크립트가 왼쪽 꺾쇠 괄호를 출력하지 않습니다.

답변

관련 문제