Question

我有一些HTML：

<h3 class="locale">Mountain View Office<br> </h3>
<p>Creative Commons<br>
444 Castro Street, Suite 900<br>
Mountain View, CA 94041</p>
<p>phone: 1-650-294-4732<br>
fax: 1-650-965-1605</p>

我需要标记地址，以便软件程序稍后可以找到该地址。我们分别使用Unicode字符「和」来分隔地址的开头和结尾（它们很少出现在英文文本中）。所以，我想要的最终结果是：

<h3 class="locale">Mountain View Office<br> </h3>
<p>Creative Commons<br>
「444 Castro Street, Suite 900<br>
Mountain View, CA 94041」</p>
<p>phone: 1-650-294-4732<br>
fax: 1-650-965-1605</p>

现在，可以使用文本编辑器执行此操作，但它不是很有用。如果您可以看到渲染的HTML，用鼠标突出显示地址，然后通过在选区周围插入Unicode字符来修改底层HTML，那就更好了。

我的问题：

那里有什么东西可以做这样的事吗？
实现上述目标的最简单方法是什么？也许我可以拿一些现有的编辑器/库来修改它。
是否可以在浏览器中完全执行此操作？如果这可以成为网络应用程序的一部分，那就太好了。

一些限制：

我不想更改底层元素树。所以，我不希望这是最终结果：

<h3 class="locale">Mountain View Office<br> </h3>
<p>Creative Commons<br>
<mark>444 Castro Street, Suite 900<br>
Mountain View, CA 94041</mark></p>
<p>phone: 1-650-294-4732<br>
fax: 1-650-965-1605</p>

此外，请注意我并不是要求在HTML中显示显示标记地址的方法 - 这部分是微不足道的。我要求最有效（在手动工作方面，而不是在开发时间方面）实际标记的方式没有标记的地址。

Answer 1

如果您在chrome中打开html文件，则可以右键单击该地址并选择“检查元素”。这将调出开发人员工具并自动突出显示您单击的元素。然后，您可以在适当的位置编辑html，可以复制粘贴结果。

我认为这是最接近你想要的，而不是诉诸任何幻想。

Answer 2

如果您正在寻找一个简单的实现来允许选择内容，并且实际上已经编辑过，那么可能无法通过JavaScript转移对事件处理的需求。

我建议快速且非侵入性的选项可能是使用HTML contenteditable属性和零宽度非连接符（&zwnj;）：

<h3 class="locale">Mountain View Office<br> </h3>
<p contenteditable="true">Creative Commons<br>
444 Castro Street, Suite 900<br>
Mountain View, CA 94041</p>
<p>phone: 1-650-294-4732<br>
fax: 1-650-965-1605</p>

因此，用户可以在段落元素中选择文本，并且您需要使用以下行中的内容来添加非连接字符：

$(function () {
    $('.editable').on('selectstart', function () {
        $(document).on('mouseup', function() {
            alert(this.getSelection());
            // insert the zero-width non-joiner characters around the selection here.
        });
    });
});

结果是您的内容中实际上没有显示任何内容，但您的地址文本中仍有一些不可打印的标记可用于选择。

Answer 3

我最后编写了一个单独的应用程序来执行此操作。

最有效的方法来手动标记部分HTML？

3 个答案: