Javascript: How to trim an editable div content

Question

I have an editable div in which users write text for comment. Now I want to remove space before and after the text. For example when a user type

"&nbsp;&nbsp;Hello&nbsp;world&nbsp;&nbsp;&nbsp;"

I have to insert

"Hello&nbsp;world"

into the database.

I have tried

text.trim()

but it doesn't work. How can I do this ?

Also how to remove duplicates empty line ?

I would like to replace

<div>Hello</div>
<div></div>
<div></div>
<div></div>
<div>World</div>

By

<div>Hello<div>
<div></div>
<div>World</div>

Thank you

@Kevin please review the question again. It has nothing to do with trim() function. The user is facing different issue but was not able to properly describe He needs to remove and
from the editable div — Yuri, Jan 19 '18 at 19:11
If the question were updated to show the real problem, i'd consider casting my reopen vote. Currently it looks like an X/Y. — Kevin B, Jan 19 '18 at 19:43
@KevinB sorry I'm not an anglophone. I translated my question from French to English and it gives me that. You can edit it to make it clearer based on these 2 cases that I explained — Amadou Beye, Jan 19 '18 at 19:52
What is missing is the html that your element contains. If it only contained spaces, as your question indicates, it would be a duplicate. — Kevin B, Jan 19 '18 at 19:53

Yuri · Accepted Answer · 2018-01-19T19:45:58.560

2

you will need to remove <br> and <div> not empty strings . Please see below:

function trimDiv(){



var text = document.getElementById("test").innerHTML.replace(/&nbsp;/gi, '').replace(/<div><br><\/div>/gi, '').replace(/<p><br><\/p>/gi, '');

//.replace(/<\/div>/gi, '');

document.getElementById("test").innerHTML=text;
}

<div id="test" contenteditable>   Hello World   </div>

<button id="trimText" onclick="trimDiv();">Trim</button>

Edit: Now code snipped will keep one Enter out of many repeated. Edit 2: Works in IE as well Try again

edited Jan 19 '18 at 19:45

answered Jan 19 '18 at 18:18

Yuri

2,820
4
28
40

It works thanks ! However I would like to remove dupicates empty line beetwen words, not a single empty line. How to do that ? – Amadou Beye Jan 19 '18 at 18:31
@AmabouBeye please try in hit ENTER key few times in the provided sample. Those will be removed as well – Yuri Jan 19 '18 at 19:06
actually it removes all empty line between words. I have to leave at least one – Amadou Beye Jan 19 '18 at 19:23
It also loses the space – Kevin B Jan 19 '18 at 19:34
IE uses a different element structure when pressing enter. so... doesn't work in IE. ditto for firefox. – Kevin B Jan 19 '18 at 19:40

Omid Moghadas · Answer 2 · 2021-01-24T07:37:58.923

You have an easy way to do this.... just use width or height for your tag or div you want to trim it and use some style on this same this....

<h6 style="height: 30px; overflow: hidden">some text you want to trim it....</h6>

after that don`t show your text max-height > 30px ...

for example if you want to trim one tag you can use some CSS like this:

width: 170px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

and you see trim with witdh: 170px .... :)

I hope this answer be helpful :)

score -1 · Answer 3 · answered Jan 19 '18 at 17:59

It is working I have tried it in chrome console. To trim any string in javascript you can use trim() function. To check if trim is working alert the length of old string and after trimming the same using string.length

str = "  Hello World  "
alert(str.length)

trimmedString = str.trim()
alert(trimmedString.length)

score -2 · Answer 4 · answered Jan 19 '18 at 17:59

Trim text with regular expression

var _text ="      Hello world                  ";

//trimming space from left side of the string
function lTrim (data) {
 return data.replace(/^\s+/,"");
}
 
//trimming space from right side of the string
function rTrim(data) {
 return data.replace(/\s+$/,"");
}

_text = lTrim(_text);
_text = rTrim(_text);

console.log(_text);

score -2 · Answer 5 · answered Jan 19 '18 at 18:05

Here it is : (working example)

function filterTextarea(id){
var string = document.getElementById(id).value;
var result = string.replace(/(^[ \t]*\n)/gm, ""); // Remove lines
var result = result.trim(); // Remove spaces

console.log(result);
}

filterTextarea("example");

<textarea id="example" name="textarea"
   rows="10" cols="50" onchange="filterTextarea('example')">
       Hello



world       
</textarea>

Javascript: How to trim an editable div content

5 Answers5