[英]Javascript regex breaking on selection of forward slash
使用正则表达式将@something
和#something
链接在字符串中。 在两种情况下,它都可以正常工作。 尝试使用相同的方法来链接/something
,但这会破坏一切。
适用于@
和#
http://jsbin.com/todomuca/3/edit
不适用于/
由于链接44: http : //jsbin.com/todomuca/4/edit
知道为什么它坏了吗?
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Title</title>
</head>
<body>
<p linkify="twitter">some @username and #hashtag and now trying /test</p>
<!-- javascript -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script>
angular.module('linkify', []);
angular.module('linkify')
.filter('linkify', function () {
'use strict';
function linkify (_str, type) {
if (!_str) {
return;
}
var _text = _str.replace( /(?:https?\:\/\/|www\.)+(?![^\s]*?")([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])?/ig, function(url) {
var wrap = document.createElement('div');
var anch = document.createElement('a');
anch.href = url;
anch.target = "_blank";
anch.innerHTML = url;
wrap.appendChild(anch);
return wrap.innerHTML;
});
// bugfix
if (!_text) {
return '';
}
// Twitter
if (type === 'twitter') {
_text = _text.replace(/(|\s)*@(\w+)/g, '$1<a href="https://twitter.com/$2" target="_blank">@$2</a>');
_text = _text.replace(/(^|\s)*#(\w+)/g, '$1<a href="https://twitter.com/search?q=%23$2" target="_blank">#$2</a>');
_text = _text.replace(/(^|\s)*\/(\w+)/g, '$1<a href="https://twitter.com/search?q=$2" target="_blank">#$2</a>');
}
// Github
if (type === 'github') {
_text = _text.replace(/(|\s)*@(\w+)/g, '$1<a href="https://github.com/$2" target="_blank">@$2</a>');
}
return _text;
}
//
return function (text, type) {
return linkify(text, type);
};
})
.factory('linkify', ['$filter', function ($filter) {
'use strict';
function _linkifyAsType (type) {
return function (str) {(type, str);
return $filter('linkify')(str, type);
};
}
return {
twitter: _linkifyAsType('twitter'),
github: _linkifyAsType('github'),
normal: _linkifyAsType()
};
}])
.directive('linkify', ['$filter', '$timeout', 'linkify', function ($filter, $timeout, linkify) {
'use strict';
return {
restrict: 'A',
link: function (scope, element, attrs) {
var type = attrs.linkify || 'normal';
$timeout(function () { element.html(linkify[type](element.html())); });
}
};
}]);
var app = angular.module("app", ['linkify']);
</script>
</body>
</html>
您正在原始HTML上运行替换,在早期替换之后,该替换包括</a>
,它与/
匹配的正则表达式匹配。 您可以尝试同时匹配它们:
var TWITTER_LINK = /(?:^|\s)([@#/])(\w+)/g;
var html = text.replace(TWITTER_LINK, function (match, type, name) {
var url = {
'@': 'https://twitter.com/' + name,
'#': 'https://twitter.com/search?q=%23' + name,
'/': 'https://twitter.com/search?q=' + name
}[type];
return '<a href="' + url + '">' + match + '</a>';
});
不过,那仍然不是很愉快。 我会使用DOM。
var TWITTER_LINK = /(?:^|\s)([@#/])(\w+)/g;
var result = document.createDocumentFragment();
var lastIndex = 0;
var match;
while ((match = TWITTER_LINK.exec(text)) {
result.appendChild(document.createTextNode(text.substring(lastIndex, match.index)));
lastIndex = match.index;
var type = match[1];
var name = match[2];
var url = {
'@': 'https://twitter.com/' + encodeURIComponent(name),
'#': 'https://twitter.com/search?q=%23' + encodeURIComponent(name),
'/': 'https://twitter.com/search?q=' + encodeURIComponent(name)
}[type];
var link = document.createElement('a');
link.href = url;
link.appendChild(document.createTextNode(match[0]));
result.appendChild(link);
}
result.appendChild(document.createTextNode(text.substring(lastIndex)));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.