Question

如何使用URL动态创建任何文本中的锚元素？

例如。

转过来

<p>go to http://google.com</p>

进入这个

<p>go to <a href="http://google.com">link</a></p>

Answer 1

从this answer获取正则表达式，您可以循环使用段落并更改网址（如果有）：

$('p').each(function(idx, ele) {
    var retVal = getUrl(ele.textContent);
    if (retVal) {
        this.textContent = this.textContent.replace(retVal, '');
        $('<a/>', {href: retVal, html: retVal}).appendTo($(this));
    }
})


function getUrl(t) {
  var expression = /[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi;
  var regex = new RegExp(expression);
  var result = t.match(regex);
  if (result) {
      return result[0];
  } else {
      return '';
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<p>go to http://google.com</p>
<p>go to hhhhh</p>

Answer 2

你可以用regexp自己做，但是使用第三方模块要容易得多（特别是当你想在已经包含一些HTML的文本上进行）时，比如autolinker：

https://github.com/gregjacobs/Autolinker.js/

var linkedText = Autolinker.link(textToAutolink);

Answer 3

＆＃13;

$.prototype.anchor = function() {
  if (this[0].textContent) {
    this.html(this[0].textContent.replace(/((https?:\/\/)?((\w){1,63}\.)?(\w){1,253}\.(\w){2,63}([\w:=-_\/]+)?)/gi, '<a>$1</a>'))
      .find('a').each(function() { this.href = this.textContent; });
  }
  return this;
};
//call .anchor() on any jQuery object to parse it
$('p').each(function() { $(this).anchor(); });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>go to http://stackoverflow.com/questions</p>
<p>dont go here</p>
<p>google.com is meh</p>
<p>go to http://www.google.com or https://www.google.com</p>
<p>not a phishing link www.google.com!</p>
<p>violets are foo.bar, roses are Lorem.ipsum:42/dolor?sit=amet</p>

＆＃13;

怎么回事？

正则表达式：

/((https?:\/\/)?((\w){1,63}\.)?(\w){1,253}\.(\w){2,63}([\w:=-_\/]+)?)/gi

/( - /启动正则表达式。（打开第一个组，以便我们可以捕获整个URL

(https?:\/\/)? - 可选地匹配协议

((\w){1,63}\.)? - 可选地匹配主机名

(\w){1,253}\.(\w){2,63} - 匹配域后跟a。接下来是顶级域名

([\w:=-_\/]+)? - 可选地匹配任何其他路径

)/gi - ）关闭第一个分组，/关闭正则表达式，g搜索所有实例，我忽略文本大小写

非正则表达式：

$.prototype.anchor = fucntion() - 将.anchor（）方法添加到jQuery

if (this[0].textContent) - 防止在非文本对象上使用错误

this.html() - 您也可以使用此[0] .innerHTML = ...，但这不是可链接的

this[0].textContent.replace(..., '<a>$1</a>') - 如果匹配了URL，请将其包装在锚标记中。如果不匹配，则文本保持不变

.find('a') - 找到我们刚刚添加的任何锚点

this.href = this.textContent - 制作主播和实际超链接

return this - 维护可链接性

赞成

紧凑
将在文本中锚定多个网址
不需要外部库
不需要神秘变量

使用jQuery自动链接URL以格式化用户输入

3 个答案:

怎么回事？

赞成