javascript - 和弦和歌词格式问题

Question

我将制作一个和弦和歌词网站。但是，和弦无法复制，因为内容乱七八糟。期望的目标是当用户尝试复制和弦和歌词并将其粘贴到 MS Word 或任何文本编辑器中时，帖子内容(字符串，而不是 html)必须仍然相同而不影响其格式，即和弦位于顶部的歌词。

jsfiddle link

var markUpChordLines = function() {
  jQuery('.post-content').html(function(i, html) {
    return html.replace(/\[(.*?)\]/g, '<span class="chord" data-chord="$1"></span>');
  });

  jQuery('.chord').each(function () {
    jQuery(this.nextSibling).wrapAll('<span class="lyric_content"></span>');
    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;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="post-content">
  <p style="display: none;">G  D </p>
  <p>Al [G]contrario di [D]te  </p>
  <p>Io[F] non lo s[A]o</p>
  <p>[D] Se è g[G]iusto co[F]sì    </p>
  <p>C[A]omunqu[G]e [D]sia</p>
  <p>Io [G#sus]non mi mu[Fm]ovo</p>
  <p>Io r[Bm]esto qu[E]i</p>
</div>

Answer 1

我终于设法做到了，通过 html/tables。 rtf 格式带来了太多问题，让我浪费时间。

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('] [',']&emsp;[')
            .split(rgxCut)
            .map(el=>
          {
          if (el[0]!=='[') return el
          let chord = el.substring(1,el.length-1)
          return `<span class="chord" data-chord="${chord}">${el}</span>`
          })
  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 = '<table style="border-collapse:collapse;white-space:pre;"><tboby>'
          + '<tr><td style="padding:0;font:12px;border:none"><b><i>'
          + tc.join('</td><td style="padding:0;font:12px;border:none"><b><i>')
          + '</td></tr><tr><td style="padding:0;font:15px;border:none">'
          + tl.join('</td><td style="padding:0;font:15px;border:none">')
          + '</td></tr></tboby></table><br>'
  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; }  
 

<h3> test a copy here <small>(on lyrics) </small>and past it to :</h3>
<h5> 1 - a simple text editor ( kEdit, notePad...)</h5>
<h5> 2 - a writter editor ( LibreOffice Writer, Word...)</h5>
<hr>
<div id="copyChangedZone">
  <div class="post-content">
    <p>Al [G]contrario di [D]te</p>
    <p>Io[F] non lo s[A]o</p>
    <p>[D] Se è g[G]iusto co[F]sì</p>
    <p>C[A]omunqu[G]e [D]sia</p>
    <p>Io [G#sus]non mi mu[Fm]ovo</p>
    <p>Io r[Bm]esto qu[E]i</p>
  </div>
  <div class="post-content">
    <p>There were [C]bells on a [G°]hill</p>
    <p>[G°]But I [Dm]never heard them [Fm]ringing</p>
    <p>No, I [C]never [Em]heard them [E♭m]at [Dm]all</p>
    <p>[G7]Till there was [C]you [Dm] [G7]</p>
  </div>
  <div class="post-content">
    <p>There were [C]birds in the [G°]sky</p>
    <p>But I [Dm]never saw them [Fm]winging</p>
    <p>No, I [C]never [Em]saw them [E♭m]at [Dm]all</p>
    <p>[G7]Till there was [C]you [F] [C]</p>
  </div>
  <div class="post-content">
    <p>Then there was [F]music and [Fm]wonderful [C]roses</p>
    <p>They [A7]tell me</p>
    <p>In [Dm]sweet fragrant [D7]meadows</p>
    <p>Of [G7]dawn and [G+]dew</p>
  </div>
</div>