删除 contenteditable div 中标签内字符串前后的空格

Question

我正在尝试删除粗体标记中字符串前后的空格。

功能： 我创建了一个文本编辑器，当您在其中输入文本并选择文本并按粗体时，它会将文本加粗，当您按 html 按钮时，它会显示在下一个窗口中生成的 html。

面临的问题： 当我尝试给制表符空间然后输入文本，并选择文本以及空格并将其加粗时，它会与空白空间一起加粗。因此，当我在 html 窗口中查看 html 时，我能够看到字符串开头的空格。 我使用的代码从字符串中删除了所有空格，但我只想修剪开头和开头，并且仍然像这样在字符串之间保留空格。任何帮助将不胜感激。

例如： 当您尝试将字符串与空格一起加粗时 ' fdgfg gfdgfg fdgfg' ，这就是它在编辑器中的外观。 生成的 html 看起来像 <b>  fdgfg gfdgfg fdgfg</b> 所以我写了一个删除这些空格的代码，但它删除了所有空格并留下<b>fdgfggfdgfgfdgfg</b>。但我真正想要的是<b>fdgfg gfdgfg fdgfg</b> 没有空格。

脚本：

//shows the html
  $("#show-html").click(function(){      
    var html = $("#textEditor").html();      
    html = html.replace(/ |\s/gi, '');
  });

DEMO:

PS：它应该只删除开始和结束的空格，它应该保留文本之间的空格。例如 " abcd efgh " 这应该被修剪为 "abcd efgh" 文本之间的空格不应该被删除。

Answer 1

你可以试试.trim()

 str = "     something Here  ";
    console.log (str.trim());

或者这样使用

$.trim(str);

Answer 2

一种方法是遍历每个<b> 元素，删除所有连续的空格，然后修剪字符串。

Updated Example

$('#textEditor b').each(function () {
  $(this).text(function () {
    return $(this).text().replace(/\s+/g, ' ').trim();
  });
});

简单输入：

"     this     is   a  string  "

输出：

<b>this is a string</b>