Jade(PUG) - 새로운 라인을 <br/>로 변환하고 내용을 인코딩한 채 유지하기

질문

(추천 10)

저는 여전히 Jade(PUG) 템플릿 엔진에 대해 익숙하지 않습니다.

I am still not that familiar with the Jade template engine.

\n처럼 새로운 라인을 br 태그로 변환하고 동시에 다른 컨텐츠를 인코딩할 수 있는 방법이 있나요?

Is there a way to convert the new lines such as \n to br tags and at the same time keep the other content encoded?

 

예를 들면

For example

.replace(/\n/g,'</br>')

인코딩된 값에 적용되어 동작해야 합니다.

applied over the encoded value should do the work.

하지만 그 값을 인코딩하고 결과를 얻는 방법을 잘 모르겠습니다.

However I am not sure how to encode the value and get the result.

이 일을 도와줄 사람이 있나요?

Is there any helper for this?

답변 5개

1번 답변

(추천 15)

Jades escape method를 사용해 다음과 같은 return 값에서 줄바꿈을 할 수 있습니다.

You can use jades escape method and replace the linebreaks in the return value of that like so:

p !{escape(foo).replace(/\n/g, '<br/>')}

저는 당신의 사용 사례에 내장된 기능을 알지 못합니다.

I am not aware of any built-in functionality for your use case.

PUG가 escape 기능을 없앤 것 같기 때문에 지금 사용해야 할 것은 다음과 같습니다.

Looks like pug got rid of the escape function, so this is what you would have to use now:

p !{foo.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br/>')}

댓글

1. 이게 바로 내가 말하는 거야! 고마워, 친구!
   This is what I am talking about! Thanks mate.
2. 그건 Jade(PUG)의 method가 아니예요. 템플릿이 JS 기능으로 컴파일되기 때문에, 전역적인 내부의 모든 node와 V8을 사용할 수 있습니다.
   That's not Jade's method. Since template compiles into JS function, you can use any of node and V8 globals inside it.
3. (해당 답변 작성자)
   전역 method를 사용할 수 있는건 사실이지만, 이것은 전역 escape method가 아닙니다.
   While it is true that you can use the global methods, this isn't the global escape method.
   전역 escape method는 Jade(PUG) escape method를 반환하는 것처럼 &lt; 대신 각 <에 대해 %3C를 반환합니다.
   The global escape method would return %3C for each < instead of &lt; like jades escape method does.
4. (2번 댓글 작성자)
   @답변(+3번 댓글) 작성자 미안해요, 이 사실을 몰랐어요. 고맙습니다.
   @dave sorry, was unaware of this. Thanks. 
5. 제 템플릿에서 Pug 오류 메시지를 포맷하기 위해 시도할 때,  .message !{message.replace(/\n/g, '<br/>')} 로 충분했습니다.
   Trying to format pug error messages in my template,  .message !{message.replace(/\n/g, '<br/>')}  was enough.
6. (해당 답변 작성자)
   메시지가 <, > 또는 &를 포함한다면 제대로 escape할 수 없을 것입니다.
   If message contains <, > or & those won't be escaped correctly.
   Pug escape는 전역 method이기 때문에 위에서 언급한 문자를 수동으로 교체해야 합니다.
   Apparently with pug escape is the global method so you would have to manually replace above mentioned characters: 
   .message !{message.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br/>')}

2번 답변

(추천 11)만약 당신이 정확히 <br>이 필요한게 아니라면, 당신은 당신의 text를 단순하게 <pre> 태그에 넣을 수 있습니다.if you don't exactly need <br>, you can simply put your text within <pre> tag. 모든 화이트스페이스(새로운 라인 포함)가 입력된 대로 표시됩니다.

All whitespaces (including new lines) will be displayed as typed.

 

또는 화이트스페이스 preformatting을 보존하기 위한 css 규칙 화이트스페이스: pre를 설정할 수 있습니다.Or you could set css rule white-space: pre to preserve whitespace preformatting. MDN을 확인하세요.

Check MDN on this.

댓글

1. 이것을 단어 줄 바꿈(break-word)과 함께 사용하세요.
   Use this in conjuction with word-wrap: break-word;
2. 단어 줄 바꿈(break-word)은 허용 가능한 지점이 없는 경우 임의 지점에서 단어를 구분합니다.
   word-wrap: break-word breaks the words up at arbitrary points if there are no acceptable points.
   다음 줄로 줄 바꿈 하는 단어로 간단한 텍스트 서식을 지정하려면, 화이트스페이스(pre-wrap)을 시도해보세요. 
   If you just want simple text formatting with words wrapping to the next line, try white-space: pre-wrap

3번 답변

(추천 9)

escape method는 간단한 공백 (' ') 문자를 "%20"으로 변환합니다.

escape method, even converts simple space (' ') characters to "%20".

MDN은 escape는 더 이상 사용되지 않고 html 콘텐츠가 아니라 url의 문자열을 인코딩하기 위한 것이라고 말합니다.

MDN says escape is deprecated and it is meant for encoding strings in url, not html content.

escape() - JavaScript | MDN

또 다른 해결책은

Another solution,

each line in foo.split(/\n/)
  = line
  br

4번 답변

대부분의 답변에 따르면 p !{foo.replace(/\n/g)}를 수행해야 합니다.

Most answers say you need to do p !{foo.replace(/\n/g)}.

하지만 그것 만으로는 충분하지 않습니다.

However, that is not enough: 

regex의 \n은 새 라인 문자와 일치하기 때문에 \n에서 \가 벗어나야 합니다.

\n in regex matches the new line character so you will need to escape the \ in \n.

\n에 \을 추가하면 됩니다.

You can do that by adding a additional \ to \n.

 

최종 결론:

The final result:

p !{foo.replace(/\\n/g, '<br />')}

참고: 다른 문자도 escape하려면 다음 내용을 추가하기만 하면 됩니다.

NOTE: If you want to escape the other characters too, you can just add:

.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')

편집: html 태그에서 모든 문자를 정확하게 escape하기 위하여 p #{foo.replace...}를 사용할 수 있습니다.

EDIT: You can use p #{foo.replace...} to correctly escape all characters in html tags.

사용자가 <script>...</script> 태그를 input 필드에 삽입하여 웹 사이트를 해킹하는 것을 방지하려면 이 방법은 유용할 수 있습니다.

This can be useful if you want to prevent users from inserting <script>...</script> tags in a input field to hack your website.

5번 답변

간단한 방법은 다음과 같습니다.

You can do that simple:

p !{someString.replace(/\n/g, '<br/>')}

이 방법은 문자열을 올바르게 escape합니다.

Note that this method will correctly escape string.

댓글

1. 일부 String 변수에서 escape 하지 못하고, 이제 xss처럼 풍부한 html 콘텐츠를 렌더링할 수 있습니다 :(
   it isn't escape the someString variable, and now it can render rich html content, for example xss :( 

본문 [Jade - convert new lines to <br/> and keep the content encoded] 바로가기