Question

我有一个内容可编辑的div，我想在将其内容发送到服务器之前删除开头和结尾的空行和空格。我已经阅读了一些答案here，但找不到我想要的东西。我想通过在开始和结束时删除空格（如trim）来做与nbsp;函数相同的操作，但也要删除空白行（这意味着空白块为<div></div>或{ {1}}或<br>，依此类推...）

以下是一些示例：

<div><br></div>

应该是

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

还有

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

应该是

&nbsp;<div><br></div><div>Hello</div><div></div><div>World</div>&nbsp;&nbsp;

依此类推...

请怎么做？

Answer 1

使用for loop，innerHTML和outerHTML属性，这就是您要寻找的东西。

function trimHTML(t) {
  var between = false;
  var outHTML = "";
  for (var i = 0; i < t.childNodes.length; i++) {
    var lt = t.childNodes[i];
    //console.log(lt.innerHTML)
    var nowset = false;
    if (lt.innerHTML != undefined && lt.innerHTML != "" && lt.innerHTML != "<br>") {
      between = !between;
      nowset = true;
      outHTML += lt.outerHTML;
    }
    if (between && !nowset) {
      outHTML += lt.outerHTML;
    }
  }
  return outHTML;
}

var t = document.querySelector("#t");
var result = document.querySelector("#result");
t.innerHTML = "<div></div><div></div><div><br></div><div>Hello</div><div>World</div><div><br></div></div>";
result.value = "---TEST1: \nfrom:\n" + t.innerHTML + "\nto:\n" + trimHTML(t);
t.innerHTML = "&nbsp;<div><br></div><div>Hello</div><div></div><div>World</div>&nbsp;&nbsp;";
result.value += "\n---TEST2: \nfrom:\n" + t.innerHTML + "\nto:\n" + trimHTML(t);

<div id="t">
</div>
<textarea id="result" style="width: 100%;min-height:90px;">
</textarea>

如何在js中修剪html内容？

1 个答案: