一键删除contenteditable div中的整个锚标签

Question

我有以下HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>
    <body>
        <div id="edit" contenteditable>
            This is <a href="#">link</a> that is editable.
        </div>
    </body>
</html>

我想做的是一个非常简单的文本编辑器，您可以在其中放置链接（它们将通过JS转换为html），但是当您在后面按退格键或在其前面删除时，我希望它在以下位置消失一次（不逐字母删除锚文本）。

怎么会呢？ 我使用Javascript的步骤如下：

当按Backspace键时，检测</a>是否在光标之前，如果是，则在光标之前的部分上运行regex，选择第一个匹配项并将其替换为空格。
相反，检测是否按下了Delete键，检查<a ... >是否在其前面，并将其也移除。

我只是不太确定如何将其放入代码中，也不能确定是否可以运行regex并使其能够识别contenteditable区域中的文本。 我想避免使用任何繁重的外部库，因为除此之外，文本编辑器实际上不会做更多的事情。

如果有人要在这里叉我的Codepen，那就是。 感谢您的任何建议。

Answer 1

如果您已经掌握了将该方法传递给字符串并重新分配contenteditable部分的值的方法，那么这里是一个如何构造正则表达式的示例。

 var textblock = document.getElementById('edit') function testContent(deletetype) { // deletetype == "delete" || "backspace" var txt = textblock.innerHTML.toString().trim(), rgxstring = "<a[^<]+<\\\\/a>", rgx if (deletetype == "delete") { rgxstring = "^" + rgxstring } else { rgxstring += "$" } rgx = new RegExp(rgxstring, "i") console.log(txt, txt.match(rgx)) textblock.innerHTML = txt.replace(rgx, "") } testContent("backspace")

 <div id="edit" contenteditable> This is <a href="#">link</a> </div>

Answer 2

有一个干净的方法可以解决此问题：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>
    <body>
        <div id="edit" contenteditable>
            This is <a href="#" contenteditable="false">link</a> that is editable.
        </div>
    </body>
</html>

添加contenteditable =“ false”将注册整个锚，而不是逐字母地注册。

一键删除contenteditable div中的整个锚标签

问题描述

2 个解决方案

解决方案1
0 2016-03-02 21:18:43

解决方案2
0 2017-12-06 19:28:32

一键删除contenteditable div中的整个锚标签

问题描述

2 个解决方案

解决方案1 0 2016-03-02 21:18:43

解决方案2 0 2017-12-06 19:28:32

解决方案1
0 2016-03-02 21:18:43

解决方案2
0 2017-12-06 19:28:32