Question

是否可以使用正则表达式和jQuery来返回条件输出，我想用图标的方括号替换数字：

[1]将成为<img src="1.png">

我有[11]，它会将其替换为

<img src="1.png"><img src="1.png">

我有[1e1]，它会将其替换为

<img src="1.png"><img src="e.png"><img src="1.png">

但是，如果它只是文本，它将保持不变长度

[qu]将成为<img src="qu.png">

这是我到目前为止的代码：

$('p').each(function() {
    var txt = $(this).text();               
    var html = txt.replace(/\[(.*?)\]/g, function($1){

        if($1.length<=3) {
            return $1.replace(/\[(.*?)\]/g,'<span class=\'rehMark\'><img src="img/$1.png" alt="$1" /></span>')
        }else{

// this is the bit I would like help with!
// and how to deal with text rather than numbers

            return '<span class=\'lngRehMark\'>'

            for (i=0; i<$1.length; i++ )
            {
                return '<img src="img/' + $1 + '.png" alt="' + $1.length + '" /></span>'
            }
            return '</span'>'
        }
    });

    $(this).html(html);
});

Answer 1

您可以使用split，map和join将[12]转换为<img>元素数组。

另请注意，替换回调的第一个参数包含完整匹配的字符串（例如[11]），而不是第一个匹配的组（例如11）。

$('p').each(function() {
    var txt = $(this).text();               
    var html = txt.replace(/\[([^\]]*)\]/g, function(match, chars){
        var images;
        if (chars.match(/^[^0-9]*$/))
            images = '<img src="img/' + chars + '.png" />';
        else
            images = $(chars.split(''))
              .map(function() { return '<img src="img/' + this + '.png" />'; })
              .get().join('');
        return '<span class=\'lngRehMark\'>' + images + '</span>';
    });

    $(this).html(html);
});

Jquery条件正则表达式返回输出

1 个答案: