gpt4 book ai didi

javascript - 一键删除 contenteditable div 中的整个 anchor 标记

转载 作者:行者123 更新时间:2023-12-03 07:32:33 26 4
gpt4 key购买 nike

我有以下 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),但是当你在后面按退格键或在它们前面删除时,我想要它立即消失(不是逐字删除 anchor 文本)。

人们会怎样做呢?我使用 Javascript 的步骤如下:

  1. 按 Backspace 键时,检测是否 </a>位于光标之前,如果是,则在光标之前的部分运行正则表达式,选择第一个匹配项并将其替换为空格。
  2. 相反,检测是否按下了Delete键,检查是否<a ... >位于它前面,也将其删除。

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

如果有人想 fork my Codepen here it is 。感谢您的任何建议。

最佳答案

有一个干净的方法可以解决这个问题:

<!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"会将 anchor 注册为一个整体,而不是逐个字母注册。

关于javascript - 一键删除 contenteditable div 中的整个 anchor 标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35757756/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com