주어진 html 문자열에서 선행 및 후행 공백을 제거하는 방법은 무엇입니까?


178

다음 HTML 문자열이 있습니다. 이 문자열에서 선행 및 후행 공백을 제거하는 JavaScript의 샘플 코드는 무엇입니까?

<p>&nbsp;&nbsp;</p>
<div>&nbsp;</div>
Trimming using JavaScript<br />
<br />
<br />
<br />
all leading and trailing white spaces
<p>&nbsp;&nbsp;</p>
<div>&nbsp;</div>


당신의 진짜 문제는 무엇입니까? 문서에 노드를 삽입하기 전에 공백을 제거 하시겠습니까?
Rob W

모든 선행 공백과 후행 공백을 모두 제거하고 싶습니다. 공백을 제거한다는 점을 제외하고 C #의 Trim 방법과 매우 비슷합니다.
Sunil

예를 들어, 트리밍 후 다음과 같은 결과를 얻게됩니다. JavaScript를 사용한 트리밍 <br /> <br /> <br /> <br /> 모든 선행 및 후행 공백
Sunil

@Sunil이 문제를 해결했는지 모르겠지만 다음 솔루션 중 하나를 시도해 볼 수 있습니다. stackoverflow.com/questions/16708158/…
Chris Baker

답변:


245

문자열 메소드를 참조하십시오-https trim(): //developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/Trim

var myString = '  bunch    of <br> string data with<p>trailing</p> and leading space   ';
myString = myString.trim();
// or myString = String.trim(myString);

편집하다

다른 의견에서 언급했듯이 정규식 접근 방식을 사용할 수 있습니다. 이 trim방법은 사실상 정규 표현식의 별명입니다.

if(!String.prototype.trim) {  
  String.prototype.trim = function () {  
    return this.replace(/^\s+|\s+$/g,'');  
  };  
} 

...이 방법은 풀의 얕은 쪽에서 여전히 수영하는 브라우저의 경우 기본 프로토 타입에 방법을 주입합니다.


3
모든 브라우저에서 지원되지 않기 때문에 정규식 방법을 선호합니다 ( 기침 기침 IE <9).
PeeHaa

2
자르기 방법은 공백을 자르지 않고 공백 만 자릅니다. 그래서 내가 찾고있는 것이 아닙니다.
Sunil

8
"공백"이라고 생각하는 것이 확실하지 않지만 트림은 공백 문자뿐만 아니라 일반적인 공백 (줄 바꿈, 공백, 탭 등)을 제거합니다.
bsa

2
@bsa 필자는 "HTML 렌더링 결과에서 시각적으로 빈 영역"과 같이 시각적 의미에서 "공백"을 의미한다는 것을 이해하고 br"태그로 인한 줄 바꿈 제외"위에 주석을 추가했습니다 .
Chris Baker

2
170 개의 공감대가있는 답변에 확인 표시가없는 이유는 무엇입니까? 그래서 때때로 나를 혼란스럽게합니다.
tcoulson

63
var str = "  my awesome string   "
str.trim();    

오래된 브라우저의 경우 정규식을 사용하십시오.

str = str.replace(/^[ ]+|[ ]+$/g,'')
//str = "my awesome string" 

2
"[]"는 ""와 정확히 같습니다. 정확히 하나의 문자로 구성된 문자 그룹은 ..... 정확히 하나의 문자입니다.
Flimzy

2
@Flimzy : 그렇습니다. 글을 쓰는 것이 더 합리적 [\t\n\ ]\s것입니다 [ ].
erik

11
string.replace(/^\s+|\s+$/g, "");

질문을 읽고 &nbsp;일반적인 공백 대신 사용하십시오. 또한 공백은 태그 안에 포함됩니다.
Rob W

6

코드 파일과 같이 여러 줄 문자열로 작업하는 경우 :

<html>
    <title>test</title>
    <body>
        <h1>test</h1>
    </body>
</html>

이 결과를 얻으려면 모든 선행 줄을 바꾸고 싶습니다.

<html>
<title>test</title>
<body>
<h1>test</h1>
</body>
</html>

당신은 추가해야합니다 multiline귀하의 정규식에 깃발을, ^그리고 $라인으로 라인을 일치 :

string.replace(/^\s+|\s+$/gm, '');

문서에서 관련 인용 :

"m"플래그는 여러 줄 입력 문자열을 여러 줄로 처리해야 함을 나타냅니다. 예를 들어, "m"을 사용하는 경우 "^"및 "$"는 전체 문자열의 시작 또는 끝에서만 일치하는 항목에서 문자열 내의 모든 줄의 시작 또는 끝으로 변경됩니다.


4

나는 이것이 매우 오래된 질문이라는 것을 알고 있지만 여전히 받아 들일만한 대답이 없습니다. "빈"HTML 태그와 html 문자열을 기반으로하는 공백 인 html 태그를 제거해야합니다.

찾고있는 출력에 대한 귀하의 의견을 기반으로 한 해결책을 생각해 냈습니다.

Trimming using JavaScript<br /><br /><br /><br />all leading and trailing white spaces 

var str = "<p>&nbsp;&nbsp;</p><div>&nbsp;</div>Trimming using JavaScript<br /><br /><br /><br />all leading and trailing white spaces<p>&nbsp;&nbsp;</p><div>&nbsp;</div>";
console.log(str.trim().replace(/&nbsp;/g, '').replace(/<[^\/>][^>]*><\/[^>]+>/g, ""));

.trim() 선행 및 후행 공백을 제거합니다

.replace(/&nbsp;/g, '') 제거 &nbsp;

.replace(/<[^\/>][^>]*><\/[^>]+>/g, "")); 빈 태그를 제거합니다


3
var trim = your_string.replace(/^\s+|\s+$/g, '');

1
<br /> 또는 <p> & nbsp; & nbsp; </ p> <div> & nbsp; </ div>와 같은 공백을 제거합니까? 단순한 공간을 잘라내는 것은 문제가되지 않습니다. 내가 찾은 공백 제거입니다.
Sunil

공백을 제거
합니까

3

01). 선행 및 후행 공백 만 제거해야하는 경우 다음을 사용하십시오.

var address = "  No.255 Colombo  "
address.replace(/^[ ]+|[ ]+$/g,'');

문자열 "No.255 Colombo"를 반환합니다.

02). 공백을 모두 제거해야하는 경우 다음을 사용하십시오.

var address = "  No.255 Colombo  "
address.replace(/\s/g,"");

문자열 "No.255Colombo"를 반환합니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.