I've the following string containing HTML. What would be sample code in JavaScript to remove leading and trailing white spaces that would appear in the rendering of this string? In other words: how can I obtain a string that would not show any leading or training white spaces in the HTML rendering, but otherwise be identical?
<p> </p>
<div> </div>
Trimming using JavaScript<br />
<br />
<br />
<br />
all leading and trailing white spaces
<p> </p>
<div> </div>
See the String method trim():
var myString = ' bunch of <br> string data with<p>trailing</p> and leading space ';
myString = myString.trim();
// Or myString = String.trim(myString);
As noted in other comments, it is possible to use the regular expression approach. The trim method is effectively just an alias for a regular expression:
if(!String.prototype.trim) {
String.prototype.trim = function () {
return this.replace(/^\s+|\s+$/g, '');
};
}
... this will inject the method into the native prototype for those browsers which are still swimming in the shallow end of the pool.
br tags". 's making the elements empty, there are a few approaches one could use, Anthony's is one. I don't support the use of regex on HTML so I wouldn't use Anthony's approach (I favor of DOM manipulation), but he's the only one who approached the OP's problem correctly understood. I left my answer up since it seems to be helpful, but it isn't the answer to the OP. I'm fine with how it works.Use:
var str = " my awesome string "
str.trim();
For old browsers, use a regular expression:
str = str.replace(/^[ ]+|[ ]+$/g, '')
//str = "my awesome string"
[\t\n\ ] or just \s instead of [ ] which makes no sense.I see that you want the following removed: HTML tags that are "empty" and white spaces based on an HTML string.
I have come up with a solution based on your comment for the output you are looking for:
Trimming using JavaScript<br /><br /><br /><br />all leading and trailing white spaces
var str = "<p> </p><div> </div>Trimming using JavaScript<br /><br /><br /><br />all leading and trailing white spaces<p> </p><div> </div>";
console.log(str.trim().replace(/ /g, '').replace(/<[^\/>][^>]*><\/[^>]+>/g, ""));.trim() removes leading and trailing whitespace
.replace(/ /g, '') removes
.replace(/<[^\/>][^>]*><\/[^>]+>/g, "")); removes empty tags
entities which may not be the leading/trailing ones.string.replace(/^\s+|\s+$/g, "");
is used instead of an ordinary whitespace. On top of this, the whitespace is contained within a tag.If you're working with a multiline string, like a code file:
<html>
<title>test</title>
<body>
<h1>test</h1>
</body>
</html>
And want to replace all leading lines, to get this result:
<html>
<title>test</title>
<body>
<h1>test</h1>
</body>
</html>
You must add the multiline flag to your regex, ^ and $ match line by line:
string.replace(/^\s+|\s+$/gm, '');
Relevant quote from documentation:
The "m" flag indicates that a multiline input string should be treated as multiple lines. For example, if "m" is used, "^" and "$" change from matching at only the start or end of the entire string to the start or end of any line within the string.
01). If you need to remove only leading and trailing white space, use this:
var address = " No.255 Colombo "
address.replace(/^[ ]+|[ ]+$/g, '');
This will return string "No.255 Colombo".
02). If you need to remove all the white space, use this:
var address = " No.255 Colombo "
address.replace(/\s/g, "");
This will return string "No.255Colombo".
var trim = your_string.replace(/^\s+|\s+$/g, '');
<p></p>get removed (if leading or trailing)? What about tags not meant to hold text, like an<img>? Should we only delete entire elements or should we e.g. trim<p> foo</p>to<p>foo</p>? What about literal newline and space characters between tags that with default CSS won't render but could withwhite-space: pre? What about<pre>elements? Probably there's more...