Recognize src in string about autolinker.js

[gregjacobs]

It shouldn't touch any attribute. Do you have an example where it is?

[alphatwit]

I was mistaken about the cause. It works fine with the src attribute alone, but my tag contains more stuff.

<img src='http://terryshoemaker.files.wordpress.com/2013/03/placeholder1.jpg' style=' height: 22px; background-color: rgb(0, 188, 204); border-radius: 7px; padding: 2px; margin: 0px 2px;'>

turns into

<img src="&lt;a href=&quot;http://terryshoemaker.files.wordpress.com/2013/03/placeholder1.jpg&quot; target=&quot;_blank&quot;&gt;terryshoemaker.files.wordpress.com/2013/03/placeholder1.jpg&lt;/a&gt;" style=" height: 22px; background-color: rgb(0, 188, 204); border-radius: 7px; padding: 2px; margin: 0px 2px;">

[gregjacobs]

Anything happen differently if you remove the whitespace before height: 22px?

[gregjacobs]

(still a bug either way btw, just curious. Might be able to take a look tomorrow)

[alphatwit]

Yeah, removing the space does fix it.

I'm using AngularJS, so I've got a bit in the html that has nested and escaped quotes, so that space sneaks in there somehow.

[gregjacobs]

Hey @alphatwit. So sorry for the late reply. I finally got a chance to look at this.

However, I can't seem to reproduce the issue. Are you using the latest version? If so, can you post more of your HTML? Perhaps another tag that surrounds your image is causing the problem. Also, can you post the options that you're using?

Thanks,
Greg

[juliomenendez]

Same thing was happening to me with this piece of HTML:

Just a flower image <img src="https://farm9.staticflickr.com/8378/8578790632_83c6471f3f_b.jpg" />

The problem is the htmlRegex wasn't recognizing the IMG tag with attributes. I changed that regular expression to one way simpler:

htmlRegex : /<(\/)?([0-9a-zA-Z:]+)(?:\s+[^>]+)*\s*>/g,

In yours you are trying to parse the attributes but never use them so, sorry for asking but, what's the point? @alphatwit give this regular expression a try please.

[alphatwit]

I've changed my code since then, but it was something like this:

<form class="approval-form" name="thumbsUp" ng-submit="postApproval()"> <button type="submit"> <img class="thumbs-up" ng-click="comment.body='<img src=\'http://example.com/api-public/images/wg/w/Rating_and_Approval/icon-thumbs-up.png\' style=\'height: 22px; background-color: rgb(0, 188, 204); border-radius: 7px; padding: 2px; margin: 0px 2px;\'>'+comment.body;" ng-src="http://example.com/api-public/images/wg/w/Rating_and_Approval/icon-thumbs-up.png"> </button> </form>

[juliomenendez]

Ah, got it, the issue in your HTML is with the IMG tag quoted inside the comment.body. In that case I'd recommend move the click implementation to the controller instead of the template and run Autolinker.link on the comment element after that.

[alphatwit]

It's just prepending the html as a string to the comment.body. The mess of quotes and escaped quotes is because I'm doing it all in the template. That gets sent to the server. This is the code that is supposed to display the stuff inside comment.body

'<p ng-class="{\'message-snippet\':true}">' + '<span ng-bind-html = "message.data.body | autoLinker | unsafe"></span>'+ '</p >' +

At some point that space makes it into the style attribute and that causes the thing to break.

[gregjacobs]

@juliomenendez, in your example, the img tag's src attribute wasn't actually the problem. The htmlRegex in Autolinker wasn't handling self-closing tags.. Whoops! I'm surprised nobody noticed this until now. Fixed in 0.11.1

The reason for the more-complex htmlRegex in the code is to try to handle as many cases as possible. The simpler regex wouldn't work correctly if an attribute had a > character within it :)

@alphatwit, are you still having a problem? I wouldn't recommend having tags within tags, although copying/pasting your example seems to still autolink correctly. If you're still having a problem, can you copy/paste the html that is produced by your template before autolinking?