변수에 태그
본문
안녕하세요!
혼자 찾아보다가 해결이 안되서 ..ㅠ
여기에 글 올리게 되었습니다!
아래 코드는
const content = "안녕하세요 \n 오늘하루는 어떤가요? \n 맛점하세요 \n\n <span>오후도 화이팅</span>!!";
여기에 담긴 텍스트가 하나씩 타이핑 되는데요.
<script>
const content = "안녕하세요 \n 오늘하루는 어떤가요? \n 맛점하세요 \n\n <span>오후도 화이팅</span>!!";
const text = document.querySelector(".text");
let i = 0;
function typing(){
if (i < content.length) {
let txt = content.charAt(i);
text.innerHTML += txt=== "\n" ? "<br/>": txt;
i++;
}
}
setInterval(typing, 90)
</script>
여기 안에 오후도 화이팅이라는 곳만 텍스트를 다르게 적용하기 위해 <span></span> 태그를 넣었더니..
저 span 태그도 문자열로 인식되서 그대로 노출되더라구요 ㅠㅠ
function typing(){
}
여기안에 innerHTML로 넣으려니 타이핑이 안먹히구요 ㅠㅠ
content 변수안에 태그도 적용되면서 텍스트도 노출할 수 있는 방법이 있을까요?
고수님들의 답변 부탁드립니다 :) 꾸벅
답변 3
문제가 <span>오후도 화이팅</span> 이부분을
content.charAt(i) 하나씩 읽어와서 문제가 되는 겁니다.
하나씩 읽어올 경우 < 이부분이 < 인식을 하기 때문에 태그가 그대로 노출이 되는 겁니다.
방법은 두가지 입니다.
<span>오후도 화이팅</span> 이부분을 한번에 읽어 오실지..
아니면 미리 <span></span>태그를 정의하여 하나식 하실지는 미니님께서 판단하셔야합니다.
아래코드 간략하게 짜보았습니다.
<div class="text"></div>
<script>
const content = "안녕하세요 \n 오늘하루는 어떤가요? \n 맛점하세요 \n\n";
const content_sp = "<span>오후도 화이팅</span>!!";
const text = document.querySelector(".text");
let i = 0;
let end_chk = false;
function typing(){
if (i < content.length) {
let txt = content.charAt(i);
text.innerHTML += txt=== "\n" ? "<br/>": txt;
i++;
}
else
{
if(!end_chk)
{
text.innerHTML += content_sp;
end_chk =true;
}
//return;
//clearInterval(this);
}
}
setInterval(typing, 90)
</script>
와..멋지십니당!!
content.charAt(i) 이거 때문에 태그가 읽힌다니..몰랐던걸 알게되서 놀랍습니다!
정말 감사합니다.!!
저 스크립트만으로는 불가능합니다...
innerHTML, innerTEXT 두가지뿐입니다.
아래 형식으로 innerHTML로 해결해보시면 되겠습니다.
content[] = "안";
content[] = "녕";
content[] = "하";
content[] = "<span>호호호</span>";
답변 감사합니다..ㅠ
제가못하는건지..알려주신걸로는 타이핑이 안되네용..
const content = "안녕하세요 <br/> 오늘하루는 어떤가요? <br /> 맛점하세요 <br/><br/><span>오후도 화이팅</span>!!";
let text = document.querySelector(".text");
...
function typing(){
text.innerHTML = txt;
...
