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

Question

I have following HTML: 我有以下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>

What I'm trying to do is a very simple text editor where you can put in links (they would get turned into html via JS) but when you hit backspace in the back or delete in front of them, I want it to disappear at once (not deleting anchor text letter by letter). 我想做的是一个非常简单的文本编辑器，您可以在其中放置链接（它们将通过JS转换为html），但是当您在后面按退格键或在其前面删除时，我希望它在以下位置消失一次（不逐字母删除锚文本）。

How would one go about it? 怎么会呢？ My steps with Javascript would be sth like this: 我使用Javascript的步骤如下：

When pressing Backspace key, detect if </a> is before the cursor, if so run regex on the section before cursor, pick a first match and replace it with blank space. 当按Backspace键时，检测</a>是否在光标之前，如果是，则在光标之前的部分上运行regex，选择第一个匹配项并将其替换为空格。
The opposite, detect if Delete key is pressed, check if <a ... > is in front of it and remove it as well. 相反，检测是否按下了Delete键，检查<a ... >是否在其前面，并将其也移除。

I'm just not quite sure how to put this in code and also if I can run regex and have it recognize the text in contenteditable area. 我只是不太确定如何将其放入代码中，也不能确定是否可以运行regex并使其能够识别contenteditable区域中的文本。 I'd like to avoid any heavy external libraries because the text editor will not really do much more besides this. 我想避免使用任何繁重的外部库，因为除此之外，文本编辑器实际上不会做更多的事情。

If anybody wants to fork my Codepen here it is . 如果有人要在这里叉我的Codepen，那就是。 Thanks for any advice. 感谢您的任何建议。

Answer 1

If you've already got the method down to pass in the string and re-assign the value of the contenteditable section, here's an example of how to structure the regex. 如果您已经掌握了将该方法传递给字符串并重新分配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

There is a clean way to solve this: 有一个干净的方法可以解决此问题：

<!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>

Adding a contenteditable="false" will register the anchor as a whole and not letter by letter. 添加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