【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 textcontentStr = trimedCkEditorTextAt(contentStr, true);// Remove Extra whitespaces at the end of the textcontentStr = 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 childwhile (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博客