Question

这就是我想做的

当窗口大小小于1000时，将任何纯文本网址更改为可点击的网址
当窗口大小> 1000时，将任何纯文本网址更改为可点击的网址，并替换为“链接”一词。

我去了，但是好像在某处失败了！

任何人都可以露面吗？

谢谢

<html>
<head>
   <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
   <script>$(document).ready(function() {
    function checkWidth() {
        var windowSize = $(window).width();
        if (windowSize < 1000) {
          $('div').each(function(){ $(this).html( $(this).html().replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, '<a href="$1">$1</a> ') ); });
        } //make plain text url clickable
        else if (windowSize < 1000) {
          $('div').each(function(){ $(this).html( $(this).html().replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, '<a href="Link">Link</a> ') ); });
        } //convert plain text to clickable word "Link"

    }
    checkWidth();
    $(window).resize(checkWidth);
    $(window).onload(checkWidth);
});
  </script>  
</head>  
<body>
  <div>https://www.google.com/</div>
  <div>https://www.yahoo.com/</div> 
  </body>
</html>

Answer 1

我认为这就是您想要的。

function checkWidth() {
        var windowSize = $(window).width();
        if (windowSize > 1000) {
          $('div').each(function(){
			var div = $(this).html();
			var link = $(this).find('a');
			var linkText = $(this).find('a').html();
			if(link.length === 0) {
				$(this).html(div.replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, '<a href="$1">$1</a> '));
			} else {
				$(this).find('a')[0].innerHTML = $(this).find('a')[0].href;
			}  
		  });
        } //make plain text url clickable
        else if (windowSize < 1000) {
			$('div').each(function(){
				var div = $(this).html();
				var link = $(this).find('a');
				var linkText = $(this).find('a').html();
				if(link.length === 0) {
					$(this).html(div.replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, '<a href="$1">Link</a> '));
				} else {
					$(this).find('a')[0].innerHTML = 'Link';
				} 
			})
		}//convert plain text to clickable word "Link"
		
    }
    $(document).ready(function() {
        checkWidth();
    });
	//$(window).onload(checkWidth);
	$(window).resize(function(){checkWidth();});

<!DOCTYPE html>
<html>
<head>
   <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
 
</head>  
<body>
  <div>https://www.google.com/</div>
  <div>https://www.yahoo.com/</div> 
  </body>
</html>

Answer 2

@jakecigar在jquery论坛中提供的好解决方案

HTML：

<div>https://www.google.com/</div>
<div>https://www.yahoo.com/</div>

CSS：

@media only screen and (max-width: 1000px) {
  .abbr {
   font-size:0;
    text-decoration:none;
  }
  .abbr:after {
    display: inline;
    font-size:16px;
    content: "link";
    color:black;
  }
}

JS：

$(function() {
  $('div').each(function() {
    $(this).html($(this).html().replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, '<a class=abbr href="$1">$1</a> '));
  });
})

基于windowSize的Linkify（链接的纯文本网址）

2 个答案: