contentEditable div replace url links

JavaScript
1

I have a contentEditable DIV where I would like to replace any user typed URL (by matching the string with regular expression) with blue color text wrapped inside a span tag.

However, different browsers return different results. Besides, replacing the matched text with span puts cursor at the beginning of the text.
Here is the link: http://jsfiddle.net/Qz5ww/1

**CSS**

    .class{
        position:relative;
        outline:none;
        border:5px solid #96C;
        font-size:16px;
        width:500px;
        height:60px;
        padding:0px 2px;
        word-wrap:break-word;
    }

**HTML**

    <div class='class' id='div' contentEditable='true'></div>

**JavaScript**

    var regExUrl = /https?:\\/\\/([\\w\\d-\\.]+)?[\\w\\d-\\.]+\\.{1}[\\w]{1,4}(\\/{1})?([a-zA-Z0-9&-@_\\+.*&#8203;~#?\\/=]*)?/gi;

    var div = document.getElementById('div');

    div.onkeyup = function () {
        if (div.innerHTML.match(regExUrl)) {
            st = div.innerHTML.match(regExUrl);
            div.innerHTML = div.innerHTML.replace(regExUrl, "<span style='color:blue;text-decoration:underline'>" + st[0] + "</span>");

        }
    }

How can I set the cursor at the end of the replaced text and continue typing with the default color (black)?

2

Hi,

The first problem is with your regex.
Using a regex to match a url is not a trivial task.
For example, “http://localhost” and “http://abc.com:8080/dir/index.html?id=255&m=hello#top” are both valid urls.

I would consider simplifying your regex to match anything beginning with http and containing a dot followed by one to five characters, or using something more powerful, such as this or [URL=“https://github.com/websanova/js-url”]this.

3

Thanks for your reply, Pullo. I cant’ figure out what will the script http://james.padolsey.com/javascript/parsing-urls-with-the-dom/ return if the passed variable is not a valid url string?

4

With that script you would have to break up the user input into groups of characters separated by spaces (as AFAIK a url can’t contain a space), then run each chunk through the function.

Depending on what kind of urls you are looking for, you would then check to see if (for example) myURL.protocol contained a value and myURL.host; contained a value with at least one dot.

If so you can replace it in the normal way.

5

Thanks for the reply, Pullo.
It isn’t related with this question, but nevertheless, if I submit data via AJAX from a contenteditable div to a php file, how should I treat the data before inserting it into the database?
I mean, how should I use htmlspecialchars()?
If I use them when sending response text, the content is displayed with tags (htmlspecialchars does what it is supposed to do), but I don’t want those tags displayed, I just want to prevent any XSS attack.

6

It might be better to ask this question in the PHP or [URL=“http://www.sitepoint.com/forums/forumdisplay.php?216-Web-Security”]Web Security forum to get a wider exposure.

What I would do is use the PDO library and prepared statements to insert data into the DB. This will help protect against SQL injection attacks.
The data you get from the DB should be sanitized before being output to prevent XSS. DO this either by using htmlspecialchars()/samp], htmlentites()orstrip_tags()`, depending what you want to escape or delete.