Question

我有一些动态生成的HTML，所以我无法编辑HTML。 HTML看起来像（1）。我希望它看起来像（2）。基本上，li末尾的字符串应该被剪切并粘贴到<a>中，然后将其包裹在其他文本中。此外，应该删除尾随-。

HTML （1）

<ul>
  <li>Jovanotti – L'ombelico Del Mondo - http://youtu.be/mMNPUw2bUhM</li>
  <li>The Police – Roxanne - http://youtu.be/3T1c7GkzRQQ</li>
</ul>

应该是什么样的（2）

<ul>
  <li><a href="http://youtu.be/mMNPUw2bUhM" title="">Jovanotti – L'ombelico Del Mondo</a></li>
  <li><a href="http://youtu.be/3T1c7GkzRQQ" title="">The Police – Roxanne</a></li>
</ul>

这是一个与SO已经提出的问题不同的问题。我不知道“url”的内容，只是它总是以http://youtu.be开头。

以下是fiddle。

Answer 1

循环遍历元素，使用.split将字符串分解为' - '然后弹出最后一个元素（url）和.join字符串的其余部分和' - '元素之间。

$('ul li').each(function () {
    var li = $(this),
        parts = li.text().split(' - ');
    li.html('<a href="' + parts.pop() + '">' + parts.join(' - ') + '</a>');
});

http://jsfiddle.net/rustyjeans/89whD/

Answer 2

我使用.wrapInner()和.each()的组合：

$('ul li').wrapInner('<a>').find('a').each(function(i,el) {
    var arrCont = $(el).text().split(/\s*-\s*http/),
        strText = arrCont[0],
        strUrl = "http"+arrCont[1];
    $(el).attr('href',strUrl).attr('title','').text(strText);
});

http://jsfiddle.net/mblase75/Ax8QU/

获取字符串并将其包装在<a></a>中

2 个答案: