Javascript 正则表达式将链接插入列表

Question

我的网站上有一堆采用以下格式的轨道列表内容:

<div class="tracklist">
1. Artist - Title (Record Label)
2. Another artist - Title (Another label)
</div>

我想使用正则表达式来查找艺术家和标签名称并将它们包装在链接中，如下所示:

<div class="tracklist">
1. <a href="http://www.example.com/Artist">Artist</a> - Title <a href="http://www.example.com/Record+Label">(Record Label)</a>
2. <a href="http://www.example.com/Another+Artist">Another artist</a> - Title <a href="http://www.example.com/Another+label">(Another label)</a>  
</div>

我想我可以使用 JavaScript 正则表达式找到艺术家和标签名称:

var artist = /[0-9]\. .*? -/gi
var label = /\(.*?\)/gi

使用 jQuery 查找匹配的字符串:

$(".tracklist").html().match(label)
$(".tracklist").html().match(artist)

然后使用 substring() 方法删除数字、句点、空格、破折号和括号。但是插入链接并保留文本的好方法是什么？

在更一般的层面上，这个想法是否可行，或者是否属于“不要用 JavaScript 解析 HTML”？服务器端实现是否更好(使用一些 XML/XSL 魔法)？

Answer 1

它不属于“不要用 .. 解析 html”的范围，因为您不是在解析 HTML，而是在解析文本并从中创建 HTML。

可以获得div的全部文本内容:

var text = $('.tracklist').text();

然后分成几行:

var lines = text.split(/\r?\n/);

并分别解析每一行:

function parseLine(line) {
    var match = line.match(/^\d+\.\s+([^-]+)\s-\s([^(]+)(\s*(.*))/);
    if (match) {

        var artist = match[1], title = match[2], label = match[4];

        // create HTML here
    }       
}

$.each(lines, function(index, line) {
    var elems = parseLine(line);
    // append elems to the div
}

正则表达式可以解释如下:

/^\d+\. # this matches the number followed by the dot at the begining
\s+     # the number is separated by one or more whitespace
([^-]+) # the artist: match everything except "-"
\s-\s   # matches the "-" separated by one or more whitespace
([^(]+) # the title: matches everything except "("
(\s+    # one or more whitespace
(.*))/  # the label