I need to get rid of the parentheses around a number inside of a

Question

I found a way to do it with jQuery but I need pure javascript I can put in <script> tags.

<span class="slicethis">(10)</span>

$('span.slicethis').text(function (_,txt) {
    return txt.slice(1, -1);});

The jQuery jsfiddle is: http://jsfiddle.net/d72ML/1062/

Can someone help me out?

You need to give more details. If your code could look like this: http://jsfiddle.net/mplungjan/u13ym3op/ we would need to loop — mplungjan, Feb 23 '18 at 13:35

score 2 · Answer 1 · edited Feb 23 '18 at 13:38

Just replace jquery with querySelector and set textContent instead of text

var el = document.querySelector('span.slicethis');
el.textContent = el.textContent.slice(1, -1);

Demo

var el = document.querySelector('span.slicethis');
el.textContent = el.textContent.slice(1, -1);

<span class='slicethis'>(10)</span>

Edit

$('span.slicethis') iterate over all the items that match this selector, so if there are going to be multiple such elements, then you need to iterate them using querySelectorAll

[ ...document.querySelectorAll('span.slicethis') ].forEach( function(el){
    el.textContent = el.textContent.slice(1, -1);  
});

[ ...document.querySelectorAll('span.slicethis') ].forEach( function(el){
    el.textContent = el.textContent.slice(1, -1);  
});

<span class='slicethis'>(1)</span>
<span class='slicethis'>(10)</span>
<span class='slicethis'>(100)</span>

If you're going to show a solution like this, then please explain what your answer does, and how it works. At the very least explain what the `...` (spread) operator does, and why you're using it. — David Thomas, Feb 23 '18 at 15:30

score 1 · Answer 2 · answered Feb 23 '18 at 13:30

1

To remove parenthesis, you can use some regex to replace it replace(/\)|\(/g, "") inorder to remove multiple parenthesis instead of .slice and use innerHTML to set/get the html content

var el = document.getElementsByClassName("slicethis")[0];
el.innerHTML = el.innerHTML.replace(/\)|\(/g, "");

<span class="slicethis">(10)</span>

answered Feb 23 '18 at 13:30

void

36,090
8
62
107

querySelectorAll is more compatible and you likely need to loop to get all spans involved – mplungjan Feb 23 '18 at 13:33
@mplungjan agreed. But that depends on the use case of OP. I was just highlighting the way to do it. – void Feb 23 '18 at 13:34

score -1 · Answer 3 · answered Feb 23 '18 at 13:29

-1

That's overkill. No JQuery needed for simple string operation. The String.substr(start, numChars) method does the trick.

console.log(document.querySelector(".slicethis").textContent.substr(1,2));

<span class="slicethis">(10)</span>

answered Feb 23 '18 at 13:29

Scott Marcus

64,069
6
49
71

2

Not the down-voter, but if you're going to post a jQuery-alternative (which is exactly what the OP wanted, obviously) bear in mind that there are features of that jQuery approach you haven't replicated; which is the difference between `document.querySelector()` and `document.querySelectorAll()`. – David Thomas Feb 23 '18 at 13:31
1

Not to mention if the number is smaller or larger than 2 digits – mplungjan Feb 23 '18 at 13:32
@DavidThomas I am aware of the difference, but the OP has not stated that he has multiple elements to work on. In fact, he has stated the opposite, which is why `.querySelector()` was shown. – Scott Marcus Feb 23 '18 at 13:32
http://jsfiddle.net/mplungjan/u13ym3op/ handles multiple spans with different content – mplungjan Feb 23 '18 at 13:34

I need to get rid of the parentheses around a number inside of a

3 Answers3