Question 167427 in Html Question posted in
Some basic documentation can be found here.

Html – How to copy text from different span in one row?

I have code:

<div class="text">
   <span class="word">
      Hello
   <span/>
   <span class="word">
      world!
   <span/>
<div/>

I want to copy this text into line "Hello world!"

But when I copy it, it looks like:

Hello
world!
Tags:

3

Answers


  1. 0

    After fixing your end tags, you likely did the first, but need to use the second method

    let text = document.querySelector(".text").textContent;
console.log(text); // does not do what you want

text = [...document.querySelectorAll(".text .word")]
  .map(elem => elem.textContent.trim()) // trim each element's text
  .join(" "); // join with a space
console.log(text); // works better
    <div class="text">
   <span class="word">
      Hello
   </span>
   <span class="word">
      world!
   </span>
</div>

    jQuery if you want it

    let text = $(".word").text().trim(); // does not work
console.log(text); 

text = $(".word")
  .map(function() { return $(this).text().trim() })
  .get()
  .join(" "); // works better but is not more elegant than the plain JS one
console.log(text); 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="text">
   <span class="word">
      Hello
   </span>
   <span class="word">
      world!
   </span>
</div>
    Login or Signup to reply.
  2. 0

    It is not clear, whether you want to copy the text from all spans on the web page, or if your HTML code is only a part of a bigger webpage and you only want to copy the texts from spans with the word class.

    If you want to copy only the text from spans with the word class, you can use the following code which:

    • finds all spans with word class,
    • loops through the found spans and concatenates the texts in them.
    let list_of_spans = document.getElementsByClassName("word") // get all DOM span objects with class "word"
let copied_text = '' // initialize an empty string
for (const current_span of list_of_spans) {
    copied_text += current_span.innerText // add text from a given span object to copied_text string
}
console.log(copied_text)
    <div class="text">
   <span class="word">
      Hello
   </span>
   <span class="word">
      world!
   </span>
   <span class="something-else">
      I like stack.
   </span>
</div>
    Login or Signup to reply.
  3. 0

    Might be simpler approach

    var words = $('.text .word').map(function() {
    return $(this).text().trim();
}).get();

var output = words.join(' ');
console.log(output);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text">
  <span class="word">
      Hello
   </span>
  <span class="word">
      world!
   </span>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search