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>，如果是，则在光标前的部分运行正则表达式，选择第一个匹配并用空格替换。
相反，检测是否按下了Delete键，检查<a ... >是否在它前面并将其删除。

我只是不太确定如何将其放入代码中，如果我可以运行正则表达式并让它识别出可疑区域中的文本。我想避免使用任何繁重的外部库，因为文本编辑器除此之外不会做更多的事情。

如果有人想要分叉my Codepen here it is。谢谢你的任何建议。

Answer 1

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

＆＃13;

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")

＆＃13;

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

＆＃13;

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 个答案: