我的使用场景:
需要判断富文本编辑器内是否只输入了空格or回车(这种情况我会判定为空)
let txt = ' <br /><br /><br /><br /> <br /><br /><br /><br /> <br /><br /> '
比如上面这串就是只输入了空格和回车后,富本文返回的内容,用正则要如何判断呢?
以及还有一个拓展需求,就是我想要去除富文本编辑器内,内容首尾的空格和回车要如何匹配呢?
感觉这个应该和上面思路有共同的地方
function isEmptyRichText(str) {
let count = 0;
for (const x of str.matchAll(/(?: )|(?:<br[ ]*/>)|(?:[ ]+)/g)) {
const [match] = x
const { index } = x;
if (count === index) {
count += match.length;
} else {
return false
}
}
return true
}
正则匹配空格or回车,然后判断匹配内容是否连续,不连续就证明不全是空格和回车。
首部匹配:
/^(( )|(<br[ ]*/>)|([ ]+))+/
尾部匹配:
/(( )|(<br[ ]*/>)|([ ]+))+$/
我傻了,限定开头和结尾直接 test 就好了。
/^(( )|(<br[ ]*/>)|([ ]+))*$/
/^s*(( |<brs*/?>)s*)*$/.test(txt)
用字符串的方法 replace
或者 replaceAll
,把所有空格和回车替换成空,判断剩余字符串长度是否为0即可
if(txt.replaceAll(" ",'').replaceAll("<br />",'').trim()){
console.log("输入内容有效")
}
如果字段固定是和
上面这样判断是否为空 是否可行?
或者 下面这样
var div = document.createElement("div");
div.innerHTML = txt;
if(!div.innerText.trim()){
console.log("未输入有效内容")
}
function checkIsEmpty(html) {
const div = document.createElement('div');
div.innerHTML = html;
if (/^s+$/m.test(div.innerText)) {
return true;
}
return false;
}
// 调用
checkIsEmpty(' <br /><br /><br /><br /> <br /><br /><br /><br /> <br /><br /> '); // true
checkIsEmpty(' xx<br /><br /><br /><br /> <br /><br /><br /><br /> <br /><br /> '); // false
有个不用正则来判断字符串是否都是空白或换行符的方法,就是把字符串放入一个空div节点中渲染,再判断它的子节点是否都是br节点或空白文本节点:
function isEmptyText(text) {
var div = document.createElement("div");
div.innerHTML = text;
var nodes = div.childNodes;
for (var i = 0; i < nodes.length; ++i) {
var node = nodes[i];
var name = node.nodeName;
var value = node.nodeValue && node.nodeValue.trim();
if (value || name !== "#text" && name !== "BR") return false;
}
return true;
}
console.log(isEmptyText(txt));