Most efficient way to manually mark parts of HTML?

Question

I have some 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>

I need to mark the address such that a software program can find that address later on. Let's use the Unicode characters 「 and 」 to delimit the start and end of the address, respectively (they rarely occur in English text). So, the end result that I want is:

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

Now, it's possible to do this with a text editor, but it isn't very usable. It'd be much better if you could see the rendered HTML, highlight the address with your mouse, and then modify the underlying HTML by inserting the Unicode characters around the selection.

My questions:

• Is there anything out there that already does something like this?
• What would be the simplest way to achieve the above? Perhaps I could take some existing editor/library and modify it.
• Is it possible to do this entirely within the browser? It'd be good if this could be part of a web app.

Some limitations:

I don't want to change the underlying element tree. So, I don't want this as a final result:

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

Also, please note that I'm not asking for a way to show the marked address in the HTML - that part is trivial. I'm asking for the most efficient (in terms of manual effort, not so much in terms of development time) way to actually mark an unmarked address.

Answer 1

I ended up writing a separate application to do this.

Answer 2

If you open your html file in chrome, you can right click on the address and select "inspect element." This will bring up the developer tools and automatically highlight the element you clicked on. You can then edit the html in place, can copy-paste the result.

I think this is the closest to what you want, without resorting to anything fancy.

Answer 3

If you're looking for a simple implementation to allow content to be selected and, in effect, edited then there's likely no escaping the need for event handling through JavaScript.

I would suggest a quick and non-intrusive option might be to work with the HTML contenteditable attribute and zero-width non-joiner (‌):

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

So the user is able to select text in your paragraph element and you would need to use something along the lines of the following to add the non-joiner characters:

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

The upshot is that nothing is actually shown in your content but you still have some non-printable markers in the text of your address that can be used to pick up the selections.