Javascript: 如何 trim 一个可编辑的 div 内容

Question

我有一个可编辑的 div，用户可以在其中写评论。现在我想删除文本前后的 space 。例如，当用户输入

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

我必须插入

"Hello&nbsp;world"

进入数据库。

我试过了

text.trim()

但它不起作用。我该怎么做？

还有如何删除重复的空行？

我想更换

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

来自

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

谢谢

Answer 1

Trim 带正则表达式的文本

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);

Answer 2

它正在运行我已经在 chrome 控制台中尝试过了。要 trim javascript 中的任何字符串，您可以使用 trim() 函数。要检查 trim 是否正常工作，请注意旧字符串的长度，并在 trim 之后使用 string.length

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

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

Answer 3

这里是：（工作示例）

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>

Answer 4

您需要删除 <br> 和 <div> 而不是空字符串。请看下面：

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>

编辑： 现在，截断的代码将在多次重复中保留一个 Enter。 编辑 2： 也适用于 IE 再试一次

Answer 5

你有一个简单的方法来做到这一点.... 只需为您的标签使用宽度或高度，或者 div 您想要 trim 它并在同一个标签上使用一些样式....

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

之后不要显示最大高度 > 30px 的文本 ...

例如，如果你想 trim 一个标签，你可以使用一些 CSS 像这样：

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

你会看到 trim 和 witdh: 170px .... :)

希望这个回答对您有所帮助:)

Javascript: 如何 trim 一个可编辑的 div 内容

Javascript: How to trim an editable div content

html

javascript

contenteditable