How do I replace a specific string word in data- attribute?

Question

I use a script that adds a dynamic data attribute value from the elements classname - the second part is that I want to trim the value in the data attribute.

Examples of the html:

<div class="newgroup HardDrivesExternal" data-item-tags="newgroup HardDrivesExternal show"></div>

<div class="newgroup ServiceSuppor" data-item-tags="newgroup ServiceSupport"></div>

I want it to look like this:

 <div class="newgroup HardDrivesExternal" data-item-tags="HardDrivesExternal"></div>

<div class="newgroup ServiceSuppor" data-item-tags="ServiceSupport"></div>

In the example I want to remove the first and third word in the data value - I cant remove it from the elements class so I need to do this from the data attribute. Also - the middle word changes dynamically so I want to target the specific words - newgroup and show. To make it worse the word show wont always be a value.

Whats the best way to replace that specific part of the value?

[demo](https://jsfiddle.net/guradio/nm58dkpw/) Assuming that the data value is always separated by space and there will only be 3 letters — guradio, May 12 '16 at 07:47
@guradio your example shows the 3rd element, and OP is request remove the two first values. — Marcos Pérez Gude, May 12 '16 at 07:50
@MarcosPérezGude yes remove the first 2 values that is why the only left is the 3rd last value. — guradio, May 12 '16 at 07:52
@MarcosPérezGude that is the reason why i added the bit of explanation :) — guradio, May 12 '16 at 07:53
@MarcosPérezGude i update my question - i was not clear and i also type it wrong. — Jerry Svensson, May 12 '16 at 07:53
Oh, you change everything in your edition. You are requesting now some different thing that your first statement. — Marcos Pérez Gude, May 12 '16 at 07:54
You can mix my answer with the fiddle of @guradio to target the second element (`array[1]`) — Marcos Pérez Gude, May 12 '16 at 07:55
is that number of words differ or only 3?should explain all the details — guradio, May 12 '16 at 07:55
Yes, om sorry for that. I ment to write first and third word, then I realize I had to make it clear that I needed to target the specific string of the value - my mistake! — Jerry Svensson, May 12 '16 at 07:55
@guradio its either 2 or 3 - the second word is dynamic and changes. the first and third word I want to target using the specific name of the value — Jerry Svensson, May 12 '16 at 07:57
You can try something like this: `string.split(" ").splice(1,1);` — Rajesh, May 12 '16 at 08:09

score 2 · Accepted Answer · edited May 23 '17 at 12:16

2

As I have commented, you can use split to get array of words and use array.splice() to get second word.

Note: I have used .attr to set because .data(key, val) was not working. Related post. Also I have updated text of element, to show value.

(function() {
  $.each($(".newgroup"), function(i, el){
    var attr = "item-tags";
    var val = $(el).data(attr).split(" ").splice(1,1)[0];
    $(el).attr("data-" + attr, val);
  })
})()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="newgroup HardDrivesExternal" data-item-tags="newgroup HardDrivesExternal show">test1 </div>

<div class="newgroup ServiceSuppor" data-item-tags="newgroup ServiceSupport"> test2</div>

edited May 23 '17 at 12:16

Community

1
1

answered May 12 '16 at 08:21

Rajesh

24,354
5
48
79

Close! how do I write it out without it changing the text if the element? – Jerry Svensson May 12 '16 at 08:27
Can you show me an example? i get TypeError: Cannot read property 'split' of undefined when i try that. – Jerry Svensson May 12 '16 at 08:30

score 1 · Answer 2 · answered May 12 '16 at 07:49

You can use split()

$(document).ready(function() {
    var data = $('.HardDrivesExternal').attr('data-item-tags');
    var newdata = data.split(" ");
    newdata.shift();
    newdata.shift();
    alert(newdata.join(" "));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="newgroup HardDrivesExternal" data-item-tags="newgroup ServiceSupport show anotherTag"></div>

How do I replace a specific string word in data- attribute?

2 Answers2