Extract multiple specific characters from string javascript

Question

I have the following innerHTML in element id "word":

<span class="green">h</span><span class="white">e</span><span class="white">l</span><span class="green">l</span><span class="white">o</span

I would like to create a function (wordReverter) that removes all of the tags, leaving in the above example, only the word "hello". Any help would be greatly appreciated, thank you!

function wordReverter() {
  var word = document.getElementById("word").innerHTML;
  //var rejoinedWord = rejoined word with <span> tags removed
  document.getElementById("word").innerHTML = rejoinedWord;
}

use innerText. developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText — m1k1o
– m1k1o, Commented Feb 21, 2020 at 23:53

Sunil Lama · Accepted Answer · 2020-02-21 23:56:00Z

2

Get the innerText and use it as a new innerHtml like below

(function wordReverter() {
  var word = document.getElementById("word").innerText;
  document.getElementById("word").innerHTML = word;
})()

<div id="word">
<span class="green">h</span><span class="white">e</span><span class="white">l</span><span class="green">l</span><span class="white">o</span>
</div>

answered Feb 21, 2020 at 23:56

Sunil Lama

4,5391 gold badge21 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

StackSlave Over a year ago

Yes to .innerText. No to that ridiculous (and named?) self-executing function. Actually, I even found some Browsers failing unless the self-executor is like (function(){ }()); or (()=>{ }());.

Mike · Accepted Answer · 2020-02-22 00:04:06Z

0

If you have the containing element, you can target it and retrieve it's textContent, otherwise, you can select all the elements of interest and retrieve their content as below:

function wordReverter() {
  let letters = document.querySelectorAll('.white,.green')
  return Array.from(letters).map(l=>l.textContent).join('')
}

console.log(wordReverter())

<span class="green">h</span><span class="white">e</span><span class="white">l</span><span class="green">l</span><span class="white">o</span>

answered Feb 22, 2020 at 0:04

Mike

1,33710 silver badges18 bronze badges

Collectives™ on Stack Overflow

Extract multiple specific characters from string javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related