从innerHTML contenteditable 中删除一组字符的正则表达式答案

【问题标题】：Regular expression to remove a set of characters from innerHTML contenteditable从innerHTML contenteditable 中删除一组字符的正则表达式
【发布时间】：2021-06-01 15:10:38
【问题描述】：

我正在处理 JavaScript 中的 contenteditable innerHTML 字符串，并尝试删除成对

<div><br></div>

当用户按 Enter 换行时出现。

示例字符串：（将是动态的）

<div><br></div><div><br></div><div><br></div>Example <br> String d<<div><br></div><div><br></div><div><br></div></div>

这样我可以得到

Example <br> String d<

我也通过搜索 Stack Overflow 尝试了我的正则表达式：

let final_text = document.getElementById('chat_room_input_box').innerHTML.trim();

final_text = final_text.replace(/^\s*(?:<br\s*\/?\s*>)+|(?:<br\s*\/?\s*>)+\s*$/gi, '');
final_text = final_text.replace(/^(?:&nbsp;|\s)+|(?:&nbsp;|\s)+$/ig,''); 
final_text = final_text.replace(/^\s*(?:<div\s*\/?\s*>)+|(?:<div\s*\/?\s*>)+\s*$/gi, '');

我可以在开始/结束时删除<br> 或&nbsp;，但无法删除<div><br></div>

【问题讨论】：

这听起来像是一个可能的XY problem;一个问题可能比你要求的更好地解决。一般来说，强烈不鼓励使用 RegEx 解析 HTML，除非您确切知道 HTML 在所有情况下的样子（即使那样它仍然很冒险）。

标签： javascript html regex

【解决方案1】：

不要使用正则表达式来处理 HTML。正则表达式对此不够强大。

使用 HTML 解析器。幸运的是，世界上最强大的 HTML 解析器就在您的指尖——一个浏览器。解析一段 HTML 所需要做的就是设置元素的 .innerHTML 属性。

然后您可以轻松删除您定义的任何元素，例如空的 <div> - 包括仅包含 <br> 和/或空格的元素。

作为奖励，您甚至可以保证从操作中返回有效的 HTML，因此无效的String d&lt; 将作为有效的String d&lt; 返回。

function sanitizeHtml(html) {
    const container = document.createElement('DIV');
    // Step 1: Parse the HMTL
    container.innerHTML = html;

    // Step 2: Modify the structure
    for (let div of container.querySelectorAll('div')) {
        if (div.textContent.trim() === '') div.parentNode.removeChild(div);
        // ...over time, I'm sure you'll find more things you'd like to correct
    }

    // Step 3: return the modified HTML
    return container.innerHTML;
}

function showResult() {
    const result = sanitizeHtml(this.innerHTML);
    document.getElementById('outputHtml').textContent = result;
    document.getElementById('outputDisplay').innerHTML = result;
}

const input = document.getElementById('input');
input.contentEditable = true;
input.addEventListener('input', showResult);

showResult.call(input);

#input, #outputDisplay {
  border: 1px solid red;
}
#outputHtml {
  border: 1px solid blue;
}

<div id="input"><div><br></div><div><br></div><div><br></div>Example <br> String d<<div><br></div><div><br></div><div><br></div></div></div>
<pre id="outputHtml"></pre>
<div id="outputDisplay"></pre>

【讨论】：

@Vincentius 为此，我让代码 sn-p 交互，它现在会在您输入 contentEditable 时更新输出 HTML。

【解决方案2】：

所以，就我所见，分步进行是有意义的

首先删除像br（自闭）元素这样的元素

str="<div><br></div><div><br></div><div><br></div>Example String d<<div><br></div><div><br></div><div><br></div></div>"

############## REMOVING SELF CLOSING ELEMENTS
# here is a list of self closing elements, you can add more that you want to remove
str = str.replace(/<(br|img)>/g, "")

# another way of removing self closing elements, is to look for the closure when they are properly coded <br />
str = str.replace(/<br\s*\/?>/g, "")

# if wanted, you can use both
str = str.replace(/(<br\s*\/?>|<(br|img)>)/g, "")

########## REMOVE ELEMENTS THAT CLOSE EMPTY (divs)
str = str.replace(/<([^>]*)>\s*<\/\1>/g, "")

# this will return
# str = str.replace(/<([^>])>\s*<\/\1>/g, "")

如果你想让它寻找特定的元素，你可以使用

str = str.replace(/<\/?\s*(br|img|div)\s*\/?>/g, "")

## this returns
"Example String d<"

【讨论】：