如何添加链接到匹配的文本字符串?

时间:2016-07-22 13:30:18

标签: javascript jquery html string text

我有元素列表:



<ul>
  <li>
    <a href="#link1">Text link 1</a>
    <span>My text contains text: Text link 1, that's it.</span>
  </li>
  <li>
    <a href="#link2">Text link 2</a>
    <span>My text contains text: Text link 2, that's it.</span>
  </li>
  <li>
    <a href="#link3">Text link 3</a>
    <span>My text contains text: Text link 3, that's it.</span>
  </li>
  <li>
    <a href="#link4">Text link 4</a>
    <span>My text contains text: Text link 4, that's it.</span>
  </li>
</ul>
&#13;
&#13;
&#13;

我想有这样的事情:

&#13;
&#13;
<ul>
  <li>
    <a href="#link1">Text link 1</a>
    <span>My text contains text: <a href="#link1">Text link 1</a>, that's it.</span>
  </li>
  <li>
    <a href="#link2">Text link 2</a>
    <span>My text contains text: <a href="#link1">Text link 2</a>, that's it.</span>
  </li>
  <li>
    <a href="#link3">Text link 3</a>
    <span>My text contains text: <a href="#link1">Text link 3</a>, that's it.</span>
  </li>
  <li>
    <a href="#link4">Text link 4</a>
    <span>My text contains text: <a href="#link4">Text link 4</a>, that's it.</span>
  </li>
</ul>
&#13;
&#13;
&#13;

我想在span中包装字符串,该字符串与jQuery中的链接相匹配。

2 个答案:

答案 0 :(得分:0)

使用此Fiddle

$("li").each(function() {
var getanchirlink = $(this).find('a').attr('href');
$(this).find('span').html($(this).find('span').html().replace(/Text link [0-9]/g,'<a href='+getanchirlink+'>'+$(this).find('a').html()+'</a>'));
});

答案 1 :(得分:0)

$(document).ready(function(){
    $( "li" ).each(function( index ) {
        var link=$(this).find('a').attr('href');
        var txtlink=$(this).find('a').text();

        var span=$(this).find('span');

        var rep='<a href="'+link+'">'+txtlink+'</a>';
        var txtspan=span.text();
        var nSpan=txtspan.replace(txtlink,rep);
        span.html(nSpan);
    });
});

试试这个...这对我有用。