Question

我想建立平台来学习类似代码学院的CSS，我希望有一些客户端代码验证。使用codemirror我设法做了类似codepen的应用程序，现在我想实现验证。我的想法是利用编辑器格式创建一个对象，然后将该对象与我自己的对象与正确的答案进行比较。

例如：

这是用户在编辑器上的内容：

.container {
  /* Your code goes here */
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

这些行中的每一行都转换为以下

<span class="cm-qualifier">.container</span> {

&nbsp;<span class="cm-comment">/* Your code goes here */</span>

&nbsp;<span class="cm-property">padding</span>: <span class="cm-number">10px</span>;

&nbsp;<span class="cm-property">display</span>: <span class="cm-atom">flex</span>;

&nbsp;<span class="cm-property">justify-content</span>: <span class="cm-atom">center</span>;

&nbsp;<span class="cm-property">align-items</span>: <span class="cm-atom">center</span>;

}

使用javascript我想逐行获取文本，我的问题是我不知道如何从span标记内部及其外部获取值。

这就是我为此付出的努力。

let data;
window.onload = function() {
  dataBlock = document.querySelectorAll('.CodeMirror-lines')[0];
  data = dataBlock.querySelectorAll("span[role='presentation']");

  let dataArr = Array.from(data).map(x => {
    console.log(x.innerHTML);
  });
}

我有一个想法，将innerHTML与角色分开＆＃39;＆lt;＆＃39;对于角色＆＃39;＆gt;＆＃39;等等。但我相信应该有更好的方法。提前谢谢。

从嵌套的span元素中获取数据

0 个答案: