【JS】消除头尾的换行符、空格符

一、需求说明

删除 ckeditor 生成的文本的开头和结尾的额外换行符、空格符，但不删除文本本身之间的空格、换行内容。

举例：

1、原始数据

2、期望数据

二、需求分析

1. 从 ckeditor 获得的全部字符串解析content.getData()为 HTMLCollection。

2. 遍历 html 标签并通过检查属性textContent删除任何没有文字的标签，一旦标签有文字退出循环。

3. 在有内容的标签内循环，通过拆分将字符串转换为数组str.split(' ')，遍历数组并删除每个段落头尾的<br>或者 直到到达这些标签和实体以外的任何内容，然后退出循环。

三、解决办法

1、代码

/**
 * @description: 去除段落首位的空白符和空白行
 * @param {number}
 * @return {*}
 */
const trimedCkEditorText = ckEditor => {
  // let contentStr = ckEditor.getData();// 传入的数据为富文本时
  let contentStr = ckEditor;// 传入的数据为html字符串时

  // Remove Extra whitespaces at the begining of the text
  contentStr = trimedCkEditorTextAt(contentStr, true);

  // Remove Extra whitespaces at the end of the text
  contentStr = trimedCkEditorTextAt(contentStr, false);

  return contentStr;
};




/**
 * @description: 去除段首尾的空白行 + 去除段首尾的空白符
 * @param {number}
 * @return {*}
 */
const trimedCkEditorTextAt = (contentStr, startOfText) => {
  const parser = new DOMParser();

  const doc = parser.parseFromString(contentStr, "text/html");

  // Check first child

  while (doc.body.children.length) {
    const index = startOfText ? 0 : doc.body.children.length - 1;

    const child = doc.body.children[index];

    if (child.textContent.replace(/\s/g, "").length) {

      // Remove <br> tags：清除首尾空白行
      while (child.children.length) {
        const index = startOfText ? 0 : child.children.length - 1;

        const grandechild = child.children[index];

        if (grandechild.localName === "br") grandechild.remove();
        else break;
      }

      // Remove &nbsp; tags：清除首尾空白符
      const childTextArray = child.innerHTML.split(" ");

      while (childTextArray.length) {
        const index = startOfText ? 0 : childTextArray.length - 1;
        // console.log(childTextArray, "-------", childTextArray.length, index);

        if (childTextArray[index] === "&nbsp;" || childTextArray[index] === "&nbsp;&nbsp;") {
          childTextArray.splice(index, 1); // 删除尾部的空格：全是空格的情况
          // console.log(childTextArray, "1111", childTextArray.length, index);
        } else if (
          (index !== 0 || (index === 0 && childTextArray.length === 1)) &&
          childTextArray[index] !== "&nbsp;" &&
          childTextArray[index] !== "&nbsp;&nbsp;" &&
          childTextArray[index].lastIndexOf("&nbsp;") + 6 === childTextArray[index].length
        ) {
          childTextArray[index] = childTextArray[index].replace(/\&nbsp;$/, ""); // 删除尾部的空格：“文字+&nbsp;”的情况
          // console.log(childTextArray, "2222", childTextArray.length, index);
        } else if (
          index === 0 &&
          childTextArray[index] !== "&nbsp;" &&
          childTextArray[index] !== "&nbsp;&nbsp;" &&
          childTextArray[index].indexOf("&nbsp;") === 0
        ) {
          childTextArray[index] = childTextArray[index].replace(/^(&nbsp;|)+/g, ""); // 删除头部的空格：“&nbsp;+文字”的情况
          // console.log(childTextArray, "3333", childTextArray.length, index);
        } else break;
      }

      child.innerHTML = childTextArray.join(" ");

      break;
    } else {
      child.remove();
    }
  }

  return doc.body.innerHTML;
};

2、举例

（1）输入的数据

（2）处理过程打印

（3）处理后得到的数据

3、其他说明

如果文本数据为普通字符串，则可以使用一下正则表达式去除文本首尾的空白符和换行符

"字符串".replace(/^\s+|\s+$/g, ""), // 去除首尾的空白符、换行符

 四、参考链接

参考1：

CKeditor 删除开头多余的空格 - 修剪_慕课猿问

参考2：

javascript 去除字符串首尾空格_js 去除掉首尾所有的空格-CSDN博客