从复制/粘贴中排除HTML ruby​​标记

Question

我正在使用ruby标签来添加拼音。例如：

<p>
    <ruby>与<rt>yǔ</rt></ruby><ruby>摩<rt>mó</rt></ruby><ruby>拜<rt>bài</rt></ruby><ruby>单<rt>dān</rt></ruby><ruby>车<rt>chē</rt></ruby><ruby>推<rt>tuī</rt></ruby><ruby>出<rt>chū</rt></ruby><ruby>的<rt>de</rt></ruby>...
</p>

当我尝试复制时，我也复制了拼音：

与yǔ摩mó拜bài单dān车chē推tuī出chū的

我想排除拼音被复制。例如。我想将一个句子复制/粘贴到Google翻译中。有没有办法不使用Javascript？

我尝试了user-select CSS属性和unselectable HTML属性，但都没有。

这将用于Chrome扩展程序，因此只需要Chrome支持。

Answer 1

您可以使用伪元素：

    
    rt:before {
      content: attr(data-rt);
    }

    <p>
        <ruby>与<rt data-rt="yǔ"></rt></ruby><ruby>摩<rt data-rt="mó"></rt></ruby><ruby>拜<rt data-rt="bài"></rt></ruby>...
    </p>