Question

我想按顺序将<span>更改为<li>

中的

<ul>
 <li><a href='#'>Example[Fashion][Mega]</a></li> 
</ul>

等其他元素

例如

我有这个：

<ul>
 <li><a href='#'>Example<span class='tag-name'>Fashion</span><span class='mega-type'>Mega</span></a></li>
</ul>

我想这样做

"["

所以我想用<span class='tag-name'>更改第一个<span class='mega-type'> 和"]"的第二个和</span>与return

Answer 1

您可以使用.replace并使用g标记替换所有

var a = $('a').text(); 
var _new = a.replace(/\[/, "<span class='tag-name'>")  //replace 1st"["
            .replace(/\[/, "<span class='mega-type'>") //replace 2nd"["
            .replace(/\]/g, "</span>"); //repace all "]"
$('a').html(_new);

<强> JSFIDDLE DEMO

<强>更新

这个将使用list

循环.each

var _new;
var a;
$('ul li a').each( function() {
    a = $(this).text();
    _new = a.replace(/\[/, "<span class='tag-name'>")
            .replace(/\[/, "<span class='mega-type'>")
            .replace(/\]/g, "</span>");
    $(this).html(_new);
});

<强> jSFIDDLE DEMO

Answer 2

使用.replace多次对字符串使用regular expressions方法。请注意，默认情况下，此方法会查找第一个匹配项，并将其替换为指定的第二个字符串参数。

以下是代码：

$(document).ready(function(){
    var content = $('a').text();
    var newContent = content.replace(/\[/, '<span class="tag-name">')
           .replace(/\]/, '</span>')
           .replace(/\[/, '<span class="mega-type">')
           .replace(/\]/, '</span>');
    $('a').html(newContent);
});

请参阅 DEMO here

Answer 3

使用replace( regExp, repl )

这是一种非常快捷的方法

$('li a').html( function(i, txt) {
    return txt.replace(/\[(Fashion)\]/g, ' <span class="tag-name">$1</span>')
    .replace(/\[(Mega)\]/g, ' <span class="mega-type">$1</span>');
});

.tag-name {
  color: red;
}

.mega-type {
  font-size: xx-large;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
 <li><a href='#'>Example[Fashion][Mega]</a></li> 
</ul>

而且，如果您有许多要替换的单词，可以自动执行此操作：

var words = [{word:'Fashion',class:'tag-name'},{word:'Mega',class:'mega-type'}];
$('li a').html( function( i, txt ) {
    var ntxt = txt;
    $.each( words, function( j, u ) {
        var re = new RegExp('\\[(' + u.word + ')\\]', 'g');
        ntxt = ntxt.replace( re, function(a,b) {
            return ' <span class="' + u.class + '">' + b + '</span>' 
        });
    });
    return ntxt;
});

.tag-name {
  color: red;
  background-color: blue;
}
.mega-type {
  font-size: xx-large;
  font-weight: bolder;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
 <li><a href='#'>Example[Fashion][Mega]</a></li> 
</ul>

如何改变＆＃34; [＆＃34;和＆＃34;]＆＃34;通过javascript或jQuery订购？

3 个答案: