如何将 HTML 拆分成行并在 TypeScript 中保留 HTML 结构？

Question

我已经为此苦苦挣扎了很长一段时间，所以如果有人能帮助我，我将非常感激。我想将 HTML 分成几行（在 字符），而且还保留每个文本节点和每个现有节点。在下面的情况下这是有问题的。

• 以下代码块的 HTML 示例：
  

  <code class="language-diff is-loaded"><span class="token coord">@@ -1 +1,2 @@</span>
  <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span> 
  <span class="token line">print('hello world')
  </span></span><span class="token inserted-sign inserted"><span class="token prefix 
  inserted">+</span><span class="token line">for i in range(10):
  </span><span class="token prefix inserted">+</span><span class="token line">    
  print('hello world')
  </span></span></code>
  

这里的问题是，有一个类为“token insert-sign insert”的span元素，它有子span元素，并且它们还包含一个新行。所以分割后我得到：

line 1: <span class="token coord">@@ -1 +1,2 @@</span>
line 2: <span class="token deleted-sign deleted"><span class="token prefix deleted">- 
</span><span class="token line">print('hello world')</span></span>
line 3: <span class="token inserted-sign inserted"><span class="token prefix inserted">+ 
</span><span class="token line">for i in range(10):</span></span>
line 4: <span class="token prefix inserted">+</span><span class="token line">    
print('hello world')</span>

第 4 行不正确，因为它“丢失了它的父元素以及与其父元素关联的类”。正确的是这样的：

<span class="token inserted-sign inserted"><span class="token prefix inserted">+</span> 
<span class="token line">    print('hello world')</span></span>

我需要将 HTML 拆分成行，以便我可以根据需要对其进行操作，但我不知道如何正确执行此操作。我希望我清楚我想要什么。

Answer 1

我尝试使用每个来复制这个希望它符合您的需求

let code = `@@ -1 +1,2 @@
-print('hello world')
+for i in range(10):
+   print('hello world')`;

// Split the code into lines
let lines = code.split('\n');

// Start building the HTML structure
let html = '<code class="language-diff is-loaded">';

lines.forEach(line => {
    // Determine if the line is a coordinate or an added/deleted line
    if (line.startsWith('@@')) {
        html += `<span class="token coord">${line}</span>`;
    } else {
        if (line.startsWith('-')) {
            html += `<span class="token deleted-sign deleted"><span class="token prefix deleted">${line[0]}</span> 
                      <span class="token line">${line.slice(1)}</span></span>`;
        } else if (line.startsWith('+')) {
            html += `<span class="token inserted-sign inserted"><span class="token prefix inserted">${line[0]}</span>
                      <span class="token line">${line.slice(1)}</span></span>`;
        }
    }
});

// Close the HTML structure
html += '</code>';

console.log(html);