Changing the letters of a word reformat the whole html

Question

I have this script that is changing all the letters of a content when you hover them.

Actually it changes the whole format of the page and glue all the content.

I have been told that the main issue is with this part:

var letters = $('p').text();

and that doing it like that

$("p").each(function() {/*$(this) is the current paragraph here*/});

could fix the issues of duplication and formatting

But I have no clue on how to use it since I'm pretty new to all of that. Thanks a lot for the help.

function nextLetter(ch) {
    if (!ch.match(/[a-z]/i)) return ch;
    else if (ch === 'Z') return 'A';
    else if (ch === 'z') return 'a';
    return String.fromCharCode(ch.charCodeAt(0) + 1);
}
$(document).ready(function(){
  var letters = $('p').text();
  var nHTML = '';
  for(var letter of letters) {
    nHTML+="<span class='x'>"+letter+"</span>";
  }
  $('p').html(nHTML);
  $(".x").hover(function(e) {
    if (e.type === "mouseenter") $(this).text(nextLetter($(this).text()));
  });
})

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);

}
.one{
   grid-column: 1 /5;
  grid-row: 1;
    background-color:pink;
}
.two{
   grid-column: 5 / 8;
  grid-row: 1;
  background-color:yellow;
}
.three{
   grid-column: 8 / 13;
  grid-row: 1;
  background-color:yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="one"><p>I'm the text</p></div>
  <div class="two"><p><a>I'm the link in the page</a>
    <a href="http://vimeo.com/" target="_blank" style="color: rgb(82, 19, 197);">vimeo</a><sup>➶</sup>
  </p></div>


</div>

You didn't ask a question. What should this code do? What does it do instead? Why is that wrong? Who told you that you need to change that bit, and what exactly did they say about it? — underscore_d, Jun 29 '20 at 11:52
Yeah, sorry, At this moment the script is supposed to change a letter to the next letter on the alphabet. But at this moment, this script I have is duplicating my text as you may see, and reformating the links and all the format. I would just like the script to change the letter without duplicating & changing the link format or breaking the link. — Aurore, Jun 29 '20 at 13:08

score 1 · Accepted Answer · answered Jun 30 '20 at 08:59

Basically you need to work with the inner text of the first paragraph and to work inside the inner text of the anchors of the second paragraph, hence you will need to change the selector you use accordingly. .text() glues the inner text of all matching tags, which is the cause of gluing your text. This means that .text() needs to be called on $(this) inside a function callback on the loop of the changed selector. I only needed to do slight changes on your JS code, but the slight changes are important:

function nextLetter(ch) {
    if (!ch.match(/[a-z]/i)) return ch;
    else if (ch === 'Z') return 'A';
    else if (ch === 'z') return 'a';
    return String.fromCharCode(ch.charCodeAt(0) + 1);
}
$(document).ready(function(){
  $('.one p, .two p a').each(function() {
      var letters = $(this).text();
      var nHTML = '';
      for(var letter of letters) {
          nHTML+="<span class='x'>"+letter+"</span>";
      }
      $(this).html(nHTML);
      $(".x").hover(function(e) {
          if (e.type === "mouseenter") $(this).text(nextLetter($(this).text()));
      });
})});

Fiddle: https://jsfiddle.net/4e20tpku/

Here I'm assuming that you want to be able to change the letters of vimeo inside the second link of the second paragraph as well. If this assumption is incorrect, then a slight change on the selector I have been using will be needed.

Thanks for the help. Works perfectly. – Aurore Jun 30 '20 at 17:45 — Aurore, Jun 30 '20 at 17:45

score 0 · Answer 2 · answered Jun 29 '20 at 11:59

0

You probably want something like this:

$(document).ready(function() {
  var paragraphs = $('p');     // select all paragraphs
  paragraphs.each(function() { // loop over them
    var letters = $(this).text(); // $(this) accesses the current loop item
    var nHTML = '';
    for (var letter of letters) {
      nHTML += "<span class='x'>" + letter + "</span>";
    }
    $(this).html(nHTML);
  });
  $(".x").hover(function(e) {
    if (e.type === "mouseenter") $(this).text(nextLetter($(this).text()));
  });
})

answered Jun 29 '20 at 11:59

CBroe

91,630
14
92
150

Thanks a lot, It seems to stop the text duplication but it breaks the links. – Aurore Jun 29 '20 at 13:12
1

Yes, of course it does - because you are _reading_ the content of the paragraph as mere text to begin with, meaning the links are “gone” at that point already. If you want a proper solution for that, then you need to actually traverse the DOM, and go down each “branch” until you land on an actual text node, and then replace only that specifically. – CBroe Jun 29 '20 at 13:15
2

There are existing libraries that can to this on a more sophisticated level, such as https://github.com/davatron5000/Lettering.js – CBroe Jun 29 '20 at 13:16

Changing the letters of a word reformat the whole html

2 Answers2

Linked