알이즈웰
html 줄바꿈 적용 오류 본문
같은 데이터를 뿌리는ㄷㅔ 어떤 화면에서는 줄바꿈(enter 처리)이 적용되고, 다른 곳에서는 안되는 경우가 있었다.
데이터를 가져와서 뿌리는 방법이 다른지는 모르겠다.
잘 나오는 쪽 소스는 내가 볼 수가 없으니.
안 나오는 쪽은 데이터를 가져와서 html로 그려 넣었다.
html로 그려넣으면 데이터 내 \n을 </br>로 못 바꾸나?
<table class="ui table vertical devTableStyle">
<caption></caption>
<colgroup>
<col width="150px">
<col width="370px">
</colgroup>
<tbody>
<tr>
<th>신고일</th>
<td id="requestDate"></td>
</tr>
<tr>
<th>사유</th>
<td id="requestReasonType"></td>
</tr>
<tr>
<th>상세사유</th>
<td id="requestReasonDetail"></td>
</tr>
<tr id="tr_replyDate" style="display:none;">
<th>답변일</th>
<td id="replyDate"></td>
</tr>
<tr id="tr_replyDetail" style="display:none;">
<th>구매자에게<br />전하실 말씀</th>
<td id="replyDetail"></td>
</tr>
</tbody>
</table>
$(document).ready(function () { // 1. html로 뿌림 -> 그래두 안됨 $("#replyDetail").html(GridGetValue(nonReceiptInfoGrid, "응대상세",0)); // 2. text로 뿌림 -> 그래두 안됨 $("#replyDetail").text(GridGetValue(nonReceiptInfoGrid, "응대상세",0)); // 3. console에 찍어봄 -> 줄바꿈 잘 됨 console.log(GridGetValue(nonReceiptInfoGrid, "응대상세",0)); // 4. 결국 replace로 \n -> </br> 로 교체함 $("#replyDetail").html(GridGetValue(nonReceiptInfoGrid, "응대상세",0).replace(/\n/gi, "
")); });
replace를 replaceAll처럼 사용해서 모든 \n들을 </br>로 바꿔쥬깅
억지로 이렇게 바꾸는건 좋지 않은 방향인것 같지만 일단 급한대로 수정부터 해야징
원인파악을 하고싶은데, 최소한 잘 보이는 화면과 소스 비교ㄹㅏ둥..
아마 그쪽 개발 환경(css라던가.. layout에 미리 해놓은 설정이라든가..)과 이쪽 개발환경이 달라서인듯 하당
-> 억지로 치환해쥼 흥
var str = "Hello World"; // 1. 그냥 replace str.replace("o", "*"); // o를 *로 치환. 단 첫번째 o만 치환하고 나머지는 변경되지 않는다. // 출력 : Hell* World // 2. replace를 replaceAll처럼 사용하기 str.replace(/o/gi, "*"); // 모든 o를(대/소문자 구문없이) *로 치환 // 출력 : Hell* W*rld
설명 1.
g : 발생할 모든 pattern에 대한 전역 검색
i : 대/소문자 구분 안함
m : 여러 줄 검색. (그렇다구 한다)
설명 2.
정규식에서 사용하는 특수문자 ( . ^ ( ) )를 치환할 때는 escape( \ ) 뮨자를 붙여주어야 한다.
ex. str = "Hello World.";
str.replace(/\./, "!");
출력 : Hello World!
[참고]
자바스크립트에서 REPLACE를 REPLACEALL 처럼 사용하기
[javascript|자바스크립트] 특정 문자 모두 바꾸기 (replaceAll) 쉽게 사용하기
'Programming > Front-End' 카테고리의 다른 글
테이블 td 너비 고정 (0) | 2017.10.19 |
---|---|
disabled처리된 값은 form의 value로 안 잡힌다 (0) | 2017.09.06 |
jQuery.ajaxSettings.traditional = true; (0) | 2017.06.26 |
jQuery 자식요소 seletor & li의 value 가져오기 (3) | 2017.06.06 |
jQuery 자식요소(find, children) (0) | 2017.05.29 |