from title to data-* by jQuery?

问题

I have a div element

<div class="test2" title="space enter=fadeIn exit=fadeout,scaleOut dur=1.2" >blahblahblah</div>

After magic jQuery script I want that it will be like that

<div  class="test2" data-enter="fadeIn" data-exit="fadeOut scaleOut" data-duration="1.2" title="space enter=fadeIn exit=fadeout,scaleOut dur=1.2" > blahblahblah
</div>

So I tried to manipulate with this

<script>
$( document ).ready(function() {
    $("[title*='space']").each(function() {
       var title = $(this).attr('title');
       var titleArray = title.split(" ");
       $(this).attr("data-enter", titleArray[1]);
       $(this).attr("data-exit", titleArray[2]);
       $(this).attr("data-duration", titleArray[3]);
       $(this).removeAttr('title');
    });
});
</script>

But it doesn't work properly, cause I have data-exit="fadeOut scaleOut" with two properties and my script is for div like that

<div class="test2" title="space fadeIn fadeout 1.2" >blahblahblah</div>

But I don't want it. Maybe you know right solution for this example. Maybe some find or replaceWith function will help for this. Thanks. I hope you understood my question.

回答1:

I think this is job for regular expressions. Something like this:

$("[title*='space']").each(function() {

    var title = this.title,
        enter = this.title.match(/enter=(.*?)(\s|$)/),
        exit  = this.title.match(/exit=(.*?)(\s|$)/),
        duration = this.title.match(/dur=(.*?)(\s|$)/)
        
    $(this).attr("data-enter", enter[1]);
    $(this).attr("data-exit", exit[1].replace(/,/, ' '));
    $(this).attr("data-duration", duration[1]);
    $(this).removeAttr('title');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test2" title="space enter=fadeIn exit=fadeout,scaleOut dur=1.2" >blahblahblah</div>

来源：https://stackoverflow.com/questions/29828199/from-title-to-data-by-jquery