查找以“lang”开头的类（不是节点）

Question

在下面的 HTML 示例中，我想获取元素中使用的语言code：<div id="editor"><pre><code class="language-js something"></code></pre></div>我可以使用以下代码获取类列表：editor = document.getElementById('editor');let codeNode = editor.querySelector('code[class*="lang"]');console.log (codeNode.classList);但是，现在我很困惑，我不知道如何上课？我期望一个包含“language-js”的字符串我不想使用 jQuery。

Answer 1

是classList一个只读属性，它返回DOMTokenList元素的类属性的实时集合。然后可以使用它来操作类列表。但是，由于您只想获取此元素上的类名称，因此您可以简单地使用：

codeNode.classList.value

演示：

editor = document.getElementById('editor');

let codeNode = editor.querySelector('code[class*="lang"]');

let classes = codeNode ? codeNode.classList.value.split(/(\s+)/) : [];

console.log(classes.filter(c => c.startsWith("lang"))[0]);

<div id="editor"><pre><code class="language-js something"></code></pre></div>

Answer 2

如果我正确地完成了任务，那么您就只有通过其 ID 找到的一个元素，对吧？然后，您应该获取所有类 (getAttribute('class')) 并找到以“lang”开头的类。为此，我将使用如下代码：

document.getElementById('editor').getAttribute('class').split(' ').find(element => element.indexOf('lang')===0)

请注意，它只会返回以“lang”开头的第一个类。如果您需要所有这些，请使用 reduce() 方法来构建新的类数组。