개행문자 바꾸기
\n을 <br>로 변경
1. forEach
웬 forEach? 할수도 있지만 리액트(react) 프로젝트를 했었을때 줄바꿈을 forEach 혹은 map을 사용해서 했었다.
<body>
<p>
안녕하세요 \n줄바꿈 \n연습을 \n하고 \n있습니다.\n\n\n\n줄바꿈이 \n잘 \n 될까요?
</p>
<script>
const body = document.querySelector('body');
const pTag = document.querySelector('p');
let text='';
pTag.innerHTML.split('\\n').forEach((v)=>{
//pTag.innerHTML.split(/\\n/gi).forEach((v)=>{
text += v+`<br>`;
});
pTag.innerHTML = text;
</script>
</body>
2. replace + 정규식
<body>
<p>
안녕하세요 \n줄바꿈 \n연습을 \n하고 \n있습니다.\n\n\n\n줄바꿈이 \n잘 \n 될까요?
</p>
<script>
const body = document.querySelector('body');
const pTag = document.querySelector('p');
// let pInner = pTag.innerHTML;
pTag.innerHTML = pTag.innerHTML.replace(/\\n/gi,'</br>');
//정규표현식을 넣어 줌
</script>
</body>하면서 코드의 마지막을
pInner = pInner.replace(/\\n/gi,''); 라고 작성했는데 콘솔에만 바뀐값이 나오고 화면에는 출력이 안되었다.
pInner은 pTag.innerHTML를 담은 하나의 string값이기 때문에 변수 pInner의 값만 바뀌고
pTag의 실제 innerHTML값은 바뀌지 않아서였다.
3. split + join
<body>
<p>
안녕하세요 \n줄바꿈 \n연습을 \n하고 \n있습니다.\n\n\n\n줄바꿈이 \n잘 \n 될까요?
</p>
<script>
const body = document.querySelector('body');
const pTag = document.querySelector('p');
pTag.innerHTML = pTag.innerHTML.split('\\n').join('<br>');
// pTag.innerHTML = pTag.innerHTML.split(/\\n/gi).join('<br>');
</script>
</body>
특정 단어 바꾸기
예시) 빨간색 -> 하늘색으로 변경
1. split + join
<body>
<p>
내가 좋아하는 색은 빨간색이다.<br>
그래서 물건을 살때면 빨간색으로 많이 구매를 한다.<br>
다 같은 빨간색이지 않나? 라고 할수도 있지만 <br>
빨간색도 저마다 조금씩 색의 느낌이 다르다.
</p>
<script>
const body = document.querySelector('body');
const pTag = document.querySelector('p');
pTag.innerHTML = pTag.innerHTML.split('빨간색').join('하늘색');
</script>
</body>2. replace + 정규식
<body>
<p>
내가 좋아하는 색은 빨간색이다.<br>
그래서 물건을 살때면 빨간색으로 많이 구매를 한다.<br>
다 같은 빨간색이지 않나? 라고 할수도 있지만 <br>
빨간색도 저마다 조금씩 색의 느낌이 다르다.
</p>
<script>
const body = document.querySelector('body');
const pTag = document.querySelector('p');
pTag.innerHTML = pTag.innerHTML.replace(/빨간색/gi,'하늘색');
</script>
</body>
반응형
'개발공부 > Javascript' 카테고리의 다른 글
| [javascript] 자바스크립트 객체지향 - Object Oriented Programming(OOP) (0) | 2020.01.28 |
|---|---|
| [javascript] Arrow Function 이모저모 (0) | 2019.11.05 |
| [javascript] DOM 요소에 각각 이벤트 걸기 (0) | 2019.11.03 |
| [javascript] 자바스크립트 이벤트와 이벤트 헨들러 (0) | 2019.11.01 |
| [javascript] splice, slice, split 비교 (1) | 2019.10.25 |