hypercontext / linkifyjs Goto Github PK

View Code? Open in Web Editor NEW

1.8K 24.0 180.0 4.04 MB

JavaScript plugin for finding links in plain-text and converting them to HTML <a> tags.

Home Page: https://linkify.js.org

License: MIT License

JavaScript 70.78% Shell 0.32% HTML 28.90%

javascript linkify nodejs html react jquery-plugin autolink email url

linkifyjs's People

Contributors

Stargazers

Watchers

Forkers

ali1k markiol sgreiner jboynton shrimalmadhur derektom14 bradvogel alosman24 zvin likeycomparte ronco rstets nkochnev a1russell sherwinrobles nikitazu joellarson wpsmith infowrap techpackets web1o1 studiosity edtechfoundry mrshaneh yetixxx83 cjprieb nbeaumont falcon1kr goodwall kadams54 mbojey cpillzvix marksyzm tmct bbc91 parsegarden eugenmayer bmajz lynneq vincentgarreau cezarsmpio sutanto1010 panda-network guibot17 comthit deskfed nnaut element-hq stan-ros maltestenzel billthebest hellohaoyu sanjibnarzary ghw alexlaforge phanan-forks imcvampire rubythonode jessiezhudev doccom-applibs collingo treywood dzapps cepehutu sethlu abrichr dpoh-var jslibrarydirectory bosharov smhjamalii ynov opus1269 zendesk lanetix izadmehr rafikitiki systemsthinkinginstitute easymomo asksyllable 2xaa akshgods alekzonder bradparks msmsmsmsms mrbaker4 anthonynahas juliushaertl ahtapotapp bluemona shyam-habarakada waltergammarota sangramsam prbobba vitallyio jparkerweb willamesoares matiaslopezd okahilak abhijeettakmare12 raderj89

linkifyjs's Issues

Link generated is not getting the right protocol

I have tested this on a few situations, where I open a modal and dump text into a span tag Then I execute linkify against the span tag. I have something like...
https://www.google.com
ftp://www.google.com

inside the span tag. When I linkify the span tag, I am always getting http://www.google.com. It seems like line 45 is always applying http?

Any help would be appreciated.

Google maps links

Google maps links are not parsed correctly.

For example:
https://www.google.cz/maps/place/Galerie+Butovice/@50.047215,14.353304,3a,75y,99.39h,90t/data=!3m4!1e1!3m2!1sx5AQ2s7cCfV7iB6WchUK3w!2e0!4m2!3m1!1s0x470b95c2cc93d179:0x72f0ba0296a9fb92!6m1!1e1?hl=cs

Only https://www.google.cz/maps/place/Galerie+Butovice/ part of the url is parsed as a link.

Add support for hashtags

Potential implementations

Provide a hashURL property, which is a string that can be formatted with $#'s (e.g., https://github.com/search?q=$1 ) that will be used as the search URL.
Provide a hashAction, which is a function that takes the given hashtag and performs some search action:

$('p').linkify({
  hashAction: function (search) {
    window.open('https://github.com/search?q=' + search);
  }
});

Option to cut link text to N symbols

I have a link like 'https://www.google.ru/search?q=linkifyjs&oq=linkifyjs&aqs=chrome..69i57j0l2.158j0j7&sourceid=chrome&es_sm=91&ie=UTF-8
'
I linkify it and got <a target="_blank" class="linkified" href="https://www.google.ru/search?q=linkifyjs&oq=linkifyjs&aqs=chrome..69i57j0l2.158j0j7&sourceid=chrome&es_sm=91&ie=UTF-8">https://www.google.ru/search?q=linkifyjs&oq=linkifyjs&aqs=chrome..69i57j0l2.158j0j7&sourceid=chrome&es_sm=91&ie=UTF-8</a>.
But in this case will be nice string like <a target="_blank" class="linkified" href="https://www.google.ru/search?q=linkifyjs&oq=linkifyjs&aqs=chrome..69i57j0l2.158j0j7&sourceid=chrome&es_sm=91&ie=UTF-8">https://www.google.ru/search?q…</a> (string was cut to 30 chars and followed by … symbol
P.S. I know that Linkify has option format with callback, that can do it, but IMO option is more informative and easy in use.

Is jQuery necessary?

Haven't kept up to date with the latest developments, but I've seen the Jan 1st PR with the Node.js API. Is jQuery still required on the client? Seems that URL parsing is a JavaScript problem, but it may be that the library does some additional processing.

Is there a way to avoid certain tags?

It would be nice if linkify could avoid certain tags. For example do not linkify what's inside <code> or pre tags.

Interfering with <select> lists

I'm currently experiencing an issue where linkify is "changing" the values within my <select> lists. The following code illustrates the issue:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="linkify.min.js"></script>
<script src="linkify-jquery.min.js"></script>

</head>

<body>
<div class="container">
<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
</div>
<script>
$('.container').linkify();
</script>
</body>
</html>

I would expect that my select list defaults to 1 when the page is loaded. However, after including the linkify() call it defaults to 5 (in FF the last item in the select list, in chrome seems to be some random element). It completely ignores <option selected>3</option> as well.

I have confirmed both the 1.x and 2.x versions show the same issue. I'm going to try to hack around to see if I can identify the issue but was curious if any others had experienced the same thing.

update

Looks the following code is causing the issue (tearing down the select list options and rebuilding them). This causes the rebuilt select list to land on the last element (regardless of selected or default value):

    // linkify-jquery.js, 2.0 master, line 99-107

    // Clear out the element
    while (element.firstChild) {
        element.removeChild(element.firstChild);
    }

    // Replace with all the new nodes
    for (var i = 0; i < children.length; i++) {
        element.appendChild(children[i]);
    }

Not exactly sure how to address this. I'm wondering if I can just build a CSS selector that skips <select> elements for now?

[object NodeList] error when testing with phantomjs

When running headless browser tests on my project using PhantomJS and CasperJS I get the following error on one of my pages. This error does not crop up on any normal browser so I can only assume it's related to PhantomJS itself.

TypeError: '[object NodeList]' is not a valid argument for 'Function.prototype.apply' (evaluating 'g.childNodes')

Entity encoding issues

I have a field with the value something like &&. We encode the entities before displaying so we get &amp;& However after linkify()-ing the element we get && displayed, which is incorrect.

I guess the intent is to normalise entities like & and & to plain & before parsing the contents for urls but it does give an undesired effect to non-url text.

The simplest case to test in the console would be:

$('<div>&amp;amp;&</div>').linkify()

which returns:

[<div>&&</div>]

Ideally this should return the untouched:

[<div>&amp;amp;&</div>]

Linkify in Textarea

I am using linkify in textarea & i have autosave function in it. after every 3 secs the text is saved in db .I am calling linkify before saving in db.
What problem i am facing is the focus of cursor/caret is lost due to linkify ..
I keep on writing and after autosave cursor is lost its position..
I am using froala-editor as my text editor.
Can u suggest some tweaks to solve this ..
@nfrasser

IE 8 support

The library is throwing an error in IE8. Will it support IE8 in future or not?

Screenshot is attached

A very lot of issu on jsbin

Hy!
I pasted your script in to jsbin and I get very lot of notice for erorrs.
Can you rewiew your code?

It does not work with port number

For example, you can try also in the Live Demo by using https://github.com:8080/SoapBox/jQuery-linkify/ will not work correctly.

Links with @ in it.

So, I have have link with "@" in it. It doesn't get linkified. https://www.abc.com//login/confirm/[email protected]
Any particular reason for this behavior because I can see a very small fix in the Regex, where we add "@" at two places (7. Query String).

Also
for Google Maps also we have "@" in links
https://www.google.com/maps/dir/Begumpet,+Hyderabad,+Andhra+Pradesh,+India/Hitech+City,+Hyderabad,+Andhra+Pradesh,+India/@17.4376827,78.3875553,13z/data=!3m1!4b1!4m13!4m12!1m5!1m1!1s0x3bcb90a3ed28854f:0x20084b938c2f1b8c!2m2!1d78.4663812!2d17.4447068!1m5!1m1!1s0x3bcb93dc8c5d69df:0x19688beb557fa0ee!2m2!1d78.3773954!2d17.445824

Url followed by double quote can lock up/freeze browser

Occurs only with specific path structure, e.g. path is segmented with dashes or underscores.

Tested with linkify 1.1.6 + 1.1.7 @ Chrome 43 + Firefox 36

A few benchmarked cases

"visit https://www.example.com/", she said.
d.linkifyNode => 1.0ms / 3.45%

"visit https://www.example.com/path/to/doom/d_1", she said.
d.linkifyNode => 3ms / 10.71%

"visit https://www.example.com/path/to/doom/d_1_d_2", she said.
d.linkifyNode => 39.3ms / 60%

"visit https://www.example.com/path/to/doom/d_1_d_2_d_3", she said.
d.linkifyNode => 643.2ms / 97.11%

"visit https://www.example.com/path/to/doom/d_1_d_2_d_3_d_4", she said.
d.linkifyNode => 9961.3ms / 99.73%

https://www.example.com/path/to/doom/d_1_d_2_d_3_d_4"
d.linkifyNode => 4837.4ms / 99.75%

Starting from here (10 segments and up) my browser tab just freezes up:
https://www.example.com/path/to/doom/d_1_d_2_d_3_d_4_d_5"
https://www.example.com/path/to/doom/d-1-d-2-d-3-d-4-d-5"
d.linkifyNode => n/a

No double quote, all is well:
https://www.example.com/path/to/doom/d_1_d_2_d_3_d_4
d.linkifyNode => 1ms / 99.75%

FYI Issue seems to be resolved in 2.0.0-alpha (tested prerelease-3) but i wanted to report this anyway

Unlinkify Enhancement Request

The ability to redact links would be a useful addition where you can pass a string of what a url should be redacted to.

e.g.:
if(linksAllowed){
$Item.linkify();
}
else{
$Item.linkify('unlink', '[link removed]');
}

Linkify breaking at web urls with @ in them

Some links nowadays have @ in them. For example: https://medium.com/@ainiesta/how-instagram-closed-my-account-and-gave-it-to-a-football-celebrity-625a6a770eb3 or http://naya.com.np/@mandala/post/5b62ff340a9451b3bdda9d89be5c61be

Linkify ignores everything after @

What is the official way to install this plugin?

Hi, thank you for this useful library.

I'm confused as to how I should install this plugin? Putting something like this in package.json?

    "linkifyjs": "^2.0.0-alpha.3"

If I use the above approach, the dist folder only has a single zip file. Shouldn't it be populated with minified source files, ready for use?

And since this plugin is named jquery-linkify, I also find it confusing when I have to include both linkify.min.js and linkify.jquery.min.js.

Appreciate any insight.

Old demo URL in repo description

Should be http://soapbox.github.io/jQuery-linkify

@grahammccarthy can this be fixed?

Brackets in URL

Do you guys support brackets in the URL, as some of the links do have them.
For example http://msdn.microsoft.com/en-us/library/aa752574(VS.85).aspx

Linkify with mailto adds additional mailto:

Linkify the following URL: mailto:[email protected]

The resulting tag is <a href="mailto:mailto:[email protected]">

Maintenance, documentation, and publishing

Improve documentation on README.md, add available options, make notes on contributing, building, testing, etc. (#5)
Include demo page, publish to GitHub Pages
Automated unit tests with Travis
Publish to Bower

IP address support

I guess IP addresses like http://143.345.33.44:8181 should also be supported. Are you guys planning for that?

No compatible version found: linkifyjs@'*'

$ npm install --save linkifyjs
npm ERR! Darwin 14.4.0
npm ERR! argv "/usr/local/bin/iojs" "/usr/local/bin/npm" "install" "linkifyjs" "--save"
npm ERR! node v2.3.4
npm ERR! npm  v2.12.1
npm ERR! code ETARGET

npm ERR! notarget No compatible version found: linkifyjs@'*'
npm ERR! notarget Valid install targets:
npm ERR! notarget ["2.0.0-alpha.3","2.0.0-alpha.4","2.0.0-beta.1","2.0.0-beta.2","2.0.0-beta.3","2.0.0-beta.4"]
npm ERR! notarget
npm ERR! notarget This is most likely not a problem with npm itself.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'my-project'
npm ERR! notarget

Any ideas how I can get this working with iojs?

jQuery Boilerplate as a base for the plugin

Let's use http://jqueryboilerplate.com/ as the base for the jQuery plugin.

@nfrasser I'll walk you through it offline

Links with ( and ) in it

First of all, thanks for this great useful tool and the time and effort you put in it.

I noticed a link to a page containing () does not work.
http://nl.wikipedia.org/wiki/L%27Oiseau_bleu_(theaterstuk) converts to http://nl.wikipedia.org/wiki/L%27Oiseau_bleu_(theaterstuk)
shown as code:

<a href="http://nl.wikipedia.org/wiki/L%27Oiseau_bleu_" class="linkified" target="_blank">http://nl.wikipedia.org/wiki/L%27Oiseau_bleu_</a>(theaterstuk)</td>

Option to require the use of a prefix

I am running text through Linkify - text that might be code.

An example:

import LayoutView from 'base/layout-view';
import { props, domEvent } from 'decorators';
import tmpl from './app-header.jade';
import Radio from 'radio';
import AppHeaderViewModel from './app-header-view-model';

let auth = Radio.channel('auth'),
  shell = Radio.channel('shell'),
  clips = Radio.channel('clips');

Linkify highlights Radio.channel. It would be cool with an option to require the use of http:// or www.

What is the license for this plugin?

Lovely puugin! but can I use for for commercial websites?

Links not recognized and too long

Problem 1)
The link does not get recognized, I guess it is because it follows the "..." without a space (what should I say, it's not a nice way to place a link, but unfortunately it happens).

Problem 2)
The link is too long. Is there a way to have the option to cut links into a certain length?

It kills css import src

Hello! I tried to implement this into our site. The problem (I know this is not semantically right) is that we have style elements inside the body element, with import. We have to use this solution within our solution in some cases.

This is what the script do with a file import:

<style media="screen" type="text/css"> @import url("<a class="linkified" target="_blank" cdn.axiell.com="" arena="">//cdn.axiell.com/arena/instagram-feed.css")</a>; </style>

As you can see it pushes the a-tag inside the import which kind of kills the look of different parts on the page.

In other words, this solution does not work:

<div class="arena-columns-1-2-1-2-1">
Linkify this link: www.i-should-be-linkyfied.com

But this is HTML and should not be linkyfied:
<style media="screen" type="text/css">
@import url("//cdn.axiell.com/arena/instagram-feed.css");
</style>
</div>

<script src="//cdn.axiell.com/arena/linkify.min.js"></script>
<script src="//cdn.axiell.com/arena/linkify-jquery.min.js"></script>
<script>
jQuery(document).ready(function(){
    jQuery('.arena-columns-1-2-1-2-1').linkify({
        target: "_blank"
    });
});
</script>

Anyone know how to solve? :)

Great concept, but currently with fatal flaw

Hey! I just want to say this is a great idea, and I was very excited about it at first. I run a CMS for a news site, so I was hoping to implement it into that, since reporters can be lazy with adding links and often the text just gets copied from the paper and the links remain just plain text. BUT, the big problem I see for now is that if I have a link in a post that is not just the url, it strips it out.

Example: This is a link. <- That sentence becomes plain text.

Is this a known issue that will hopefully be resolved in the future?

syntax error when try to encrypt the jquery.linkify.min.js using Obfuscator

Hello,
Can you please check the syntax errors when you try to encrypt the linkify file using obfuscator .

Thank you,

Rana .

Links have mandatory domain extension

For example, if we use the IP address we have some weird behaviour.

This does not work:
http://127.0.0.1/test/home.action

this, instead, works:
http://127.0.0.1.com/test/home.action

ftp or any links other than http as a protocol

I am using linkify on ftp://abc.com (suppose). The linkified value has href as http://abc.com rather then ftp://abc.com
I see that you are hard coding http:// while making link replace. The only reason I could find out of this is when someone type google.com then it should come out as http://google.com but then it is creating issue with other protocols.

  linkReplace.push(
    '$1<' + settings.tagName,
    'href="http://$2$4$5$6$7"'
);

Allow jQuery 1.x

Currently, this package depends on jQuery 2.x. It would be great if the 1.x line (which is still maintained) were also supported. The 1.x line has support for older browsers, and the 2.x is mostly backwards-compatible.

Is there a way to change target option according to url ?

Thanks you great plugin !
I'd like to set target= _self for some domains and _target for other ones, is there a way to do so ?
I've tried this
target: function (type) {
//
}
but I can't get url here.

Capital letters in domain names

If I use capital letters in domain names, it is not getting linkified. For example www.Google.com
Is there any reason for the same?

Support for @ mentions

would be great to link @ mentions.

links starting with capital letter not linkified

Hello,

can you please fix this issue , the link that starting with capital letter not linkified as must be .

Thanks .

Rana

Special Characters Issue

In my text content I have "&amp ;lt;" (space removed). So when DOM renders it, it gets converted into "& lt;" and when linkify is called in renders it again and make it "<". Is there any way we can avoid that so that it remains as "& lt;"

Include the linkify tests from SoapBox in this repository

Linkify replaces HTML entities in strings

var test = "[div][HTML ENTITY FOR APOSTROPHE[/div]";
test
"[div][HTML ENTITY FOR APOSTROPHE][/div]"
$(test).linkify()
[div]'[/div]

Need a callback once linkify finishes

First, thanks for the great work on this plugin. The way we currently have it implemented I need to do some post processing after Linkify completes. I have read the docs and looked at the source and I was wondering why you have not implemented any callbacks or a way to pass one in as an option. I am happy to extend the plugin to do so I was just curious if this request has been made before.

Thanks

Strings that contain a double quote get added as part of the link

If a string with a url part contains a double quote character, then linkify will add that in as part of the URL.

Example

linkifyStr('https://helloworld.com/test"')
"<a href="https://helloworld.com/test&quot;" class="linkified" target="_blank">https://helloworld.com/test"</a>"

Is this expected behavior? I've found an easy work around using formatHref but this is slightly strange. Example use cases are a URL in a JSON string that is rendered as a <pre> block.

Why all 2-Letter TLDs are Valid?

I was getting some complaints using linkify that many things that clearly weren't links (like referencing files with short extensions) were being linkified. Investigating, I found that the regex included this for identifying top-level domains:
com|ca|co|edu|gov|net|org|dev|biz|cat|int|pro|tel|mil|aero|asia|coop|info|jobs|mobi|museum|name|post|travel|local|[a-z]{2}
Clearly the final [a-z]{2} is going to lead to many false positives, so why exactly is this part of the regex?

Separate funcionality from DOM element.

I want to use Linkify object without attaching to an DOM element.

The plugin works great, but I want to use it with strings and do my stuffs and later I will create a DOM element with my template engine.

But the object constructor wants a dom element when the plugin is instanciated: new Linkfy( element, options).

Its just and idea.

hypercontext / linkifyjs Goto Github PK

linkifyjs's People

Contributors

Stargazers

Watchers

Forkers

linkifyjs's Issues

Potential implementations

Plugins for...

Recommend Projects

Recommend Topics

Recommend Org