单击按钮即可显示或隐藏格式的javascript

假设我有一个像这样的“Div”：

<div id="myContainer" contenteditable="true"> </div>

有没有办法修复它，使其能够：

• 如果内容已设置样式，则显示源代码
• 如果内容显示源代码，则显示样式文本

我不知道该怎么做

---

任何帮助都将不胜感激

您正在将div传递给html测试，而不是它的文本

checkForHtml（$element）

->

checkForHtml（$element.textContent）

var obj={showSourceCode:function（e）{
const$element=document.querySelector（“#myContainer”）；
var checkForHtml=RegExp.prototype.test.bind（/（]+>）/i）；
if（checkForHtml（$element.textContent））{
this.isHTML=true；
}否则{
this.isHTML=false；
};
if（this.isHTML）{
$element.innerHTML=$element.textContent；
this.isHTML=false；
}否则{
$element.textContent=$element.innerHTML；
this.isHTML=true；
}
}
}

点击
这是粗体这是带下划线的排序列表：
粗体
非粗体

如果函数在单击按钮之前不知道文本将采用什么格式，该怎么办？它不知道，但在呈现/反呈现文本之前会检查格式

showSourceCode: function (e) {
    const $element = document.querySelector('#myContainer');
    var checkForHtml = RegExp.prototype.test.bind(/(<([^>]+)>)/i);

    if (checkForHtml($element)) {
        this.isHTML = true;
    } else {
        this.isHTML = false;
    };

    if (this.isHTML) {
        $element.innerHTML = $element.textContent;
        this.isHTML = false;
    } else {
        $element.textContent = $element.innerHTML;
        this.isHTML = true;
    }
},

This is <span style="font-weight: bold;">BOLD</span><div>This is <span style="text-decoration-line: underline;">UNDERLINED</span></div><div><br></div><div>Ordered List:</div><div><ol><li>Bold</li><li>NotBold</li></ol></div>

This is <span style="font-weight: bold;">BOLD</span><div>This is <span style="text-decoration-line: underline;">UNDERLINED</span></div><div><br></div><div>Ordered List:</div><div><ol><li>Bold</li><li>NotBold</li></ol></div>