jquery - 插入将复制的可选空格

Question

我正在将一大段具有不同级别缩进的代码呈现为 html，我希望人们能够将其复制到文本编辑器中，同时保留缩进。

目前我的代码中有很多字符，非常困惑，很难维护。我宁愿使用::before 运算符通过 css 来实现，但我尝试过的所有解决方案都存在问题。

如果我使用 :before 在元素前插入\00a0 个字符，浏览器会显示空白，但不会复制到文本编辑器中。

如果我使用“pre”，源代码中的空格将被保留，它会使呈现的 html 过于依赖源代码的结构——即如果源代码中有 div，它会在呈现的代码中添加额外的行，加上我不得不担心源代码中的空格和新行等，当我在编辑器中重新格式化代码时，这是一个问题，我必须经常这样做以保持它干净(它是相当动态的)。

所以基本上我需要一些 css 类来给我不同级别的缩进，而不必在源代码中添加或实际空白，这也会从浏览器复制到文本文件中。

Answer 1

下面的代码添加了该类指示的任意多个选项卡，class-4 生成 4 个选项卡，然后将该数量的选项卡添加到包含该类的元素中 - jsFiddle Demo它逐行工作。

HTML

<p class="tab-1">1 tab indentations</p>
<p class="tab-2">2 tab indentations</p>
<p class="tab-3">3 tab indentations</p>
<p class="tab-4">4 tab indentations</p>

JS

var indentElements = $('[class*="tab-"]');

$.each(indentElements, function(index) {
   var indentAmount = parseInt(this.className.split('-')[1]);
   var indentation = new Array(indentAmount + 1).join('    ');
   this.innerHTML = indentation + this.innerHTML
});

输出

    1 tab indentations

        2 tab indentations

            3 tab indentations

                4 tab indentations

步骤:

1. 选择类包含tab-的所有元素
2. 遍历它们
3. 在-上拆分类名，得到索引1(-后面的数字)
4. 创建一个包含上述索引数的数组，并用它连接 4 个不间断空格(创建制表符)
5. 将该元素的 HTML 设置为其当前 HTML 内容加上相乘的 ;nbsp

引用

• 我从 Peter Bailey 处获得了第 4 步 this answer - 很酷的把戏。