Chord and lyrics format issue

Question

I'll be making a chord and lyrics website. However, the chords cannot be copied because the content is messed up. The desired goal is when the user tries to copy the chord and lyrics and paste it in MS Word or any text editor, the post content (strings, not html) must still be the same without affecting its format which is the chord is on top of the lyrics.

jsfiddle link

var markUpChordLines = function() {
  jQuery('.post-content').html(function(i, html) {
    return html.replace(/$$(.*?)$$/g, '');
  });

  jQuery('.chord').each(function () {
    jQuery(this.nextSibling).wrapAll('');
    jQuery(this.nextSibling).appendTo(this);
  });
};

markUpChordLines();

span.chord {
  position       : relative;
  display        : inline-flex;
  flex-direction : column;
  vertical-align : bottom;
  }
span.chord:before {
  content     : attr(data-chord);
  position    : relative;
  font-style  : italic;
  font-weight : bold;
  }




  G  D 
  Al [G]contrario di [D]te  
  Io[F] non lo s[A]o
  [D] Se è g[G]iusto co[F]sì    
  C[A]omunqu[G]e [D]sia
  Io [G#sus]non mi mu[Fm]ovo
  Io r[Bm]esto qu[E]i

user_10669010 · Answer

Finaly I have done that:

const txtP  = document.querySelectorAll('.post-content p')
  ,  rgxCut = /(?=$$)|(?<=$$)/
  ;
txtP.forEach(pLine=>
  {
  let newP =
    pLine.textContent.split(rgxCut)
        .map(el=>
          {
          if (el[0]!=='[') return el
          let chord = el.substring(1,el.length-1)
          return `${el}`
          })
  pLine.innerHTML = newP.join('')
  })

.post-content {
  line-height : 20px;
  font-size   : 16px;
  font-family : Arial, Helvetica, sans-serif;
  margin      : 2em .7em;
  }
span.chord {
  font-size : 0; 
  position  : relative;
  }
span.chord:after {
  position    : absolute;
  font-size   : 12px;
  top         :  -30px;
  content     : attr(data-chord);
  font-style  : italic;
  font-weight : bold;
  color       : blue;
}


  G  D 
  Al [G]contrario di [D]te
  Io[F] non lo s[A]o
  [D] Se è g[G]iusto co[F]sì
  C[A]omunqu[G]e [D]sia
  Io [G#sus]non mi mu[Fm]ovo
  Io r[Bm]esto qu[E]i

user_10669010 · Answer

I finally managed to do that, going through html / tables. the rtf format posed too many problems and made me waste time.

const txtP        = document.querySelectorAll('.post-content p')
  ,  rgxCut       = /(?=$$)|(?<=$$)/
  ,  zCopyChanged = document.querySelector('#copyChangedZone')
  ;
txtP.forEach(pLine=>pLine.innerHTML = setParagraph_Chord( pLine.textContent ))
  
zCopyChanged.addEventListener('copy', evt => 
  {
  let lines =  (''+document.getSelection()).split('\n').filter(Boolean)

  let tPlain = lines.join('\n')
    , t_html = lines.reduce((a,c)=>a+setTable_chord(c),'')

  evt.clipboardData.setData('text/plain', tPlain )
  evt.clipboardData.setData('text/html', t_html )

  evt.preventDefault()
  })

function setParagraph_Chord (line)
  {
  let newP = line
            .replaceAll('] [','] [')
            .split(rgxCut)
            .map(el=>
          {
          if (el[0]!=='[') return el
          let chord = el.substring(1,el.length-1)
          return `${el}`
          })
  return  newP.join('')
  }
function setTable_chord( line )
  {
  let tc = []
    , tl = []
    , tx = true
    ;
  line.split(rgxCut).forEach(el=>
    {
    if (el[0]!=='[') 
      {
      if (tx) tc.push('');
      tl.push(el)   
      tx = true     
      }
    else
      {
      tc.push(el.substring(1,el.length-1))
      tx = false
      }
    })
  let rep = ''
          + ''
          + tc.join(' ')
          + '
'
          + tl.join(' ')
          + '

'
  return rep
  }

.post-content {
  line-height : 20px;
  font-size   : 16px;
  font-family : Arial, Helvetica, sans-serif;
  margin      : 2em .7em;
  }
span.chord {
  font-size : 0; 
  position  : relative;
  background: #ca7a6c;
  }
span.chord:after {
  position    : absolute;
  font-size   : 12px;
  top         :  -32px;
  content     : attr(data-chord);
  font-style  : italic;
  font-weight : bold;
  color       : blue;
  transform   : rotate( -30deg );  
  }
p {
  margin : .7em;
  }
h3 { margin-bottom:0; } 
h5 { margin:0 .8em; }

 test a copy here (on lyrics) and past it to :
 1 - a simple text editor ( kEdit, notePad...)
 2 - a writter editor ( LibreOffice Writer, Word...)


  
    Al [G]contrario di [D]te
    Io[F] non lo s[A]o
    [D] Se è g[G]iusto co[F]sì
    C[A]omunqu[G]e [D]sia
    Io [G#sus]non mi mu[Fm]ovo
    Io r[Bm]esto qu[E]i
  
  
    There were [C]bells on a [G°]hill
    [G°]But I [Dm]never heard them [Fm]ringing
    No, I [C]never [Em]heard them [E♭m]at [Dm]all
    [G7]Till there was [C]you [Dm] [G7]
  
  
    There were [C]birds in the [G°]sky
    But I [Dm]never saw them [Fm]winging
    No, I [C]never [Em]saw them [E♭m]at [Dm]all
    [G7]Till there was [C]you [F] [C]
  
  
    Then there was [F]music and [Fm]wonderful [C]roses
    They [A7]tell me
    In [Dm]sweet fragrant [D7]meadows
    Of [G7]dawn and [G+]dew

Chord and lyrics format issue

2 Answers