如何将 HTML 标签内容传递给 mark.js 并用空格或逗号分隔它们？

问题描述

我正在使用 mark.js 库来突出显示页面上的关键字，这很好用，但我需要在每个标签 h1、h2 等之后添加一个额外的空格或逗号。

首先我想到了这样的循环，但标记的库不喜欢它并出现此错误：Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document':

    var els = document.querySelectorAll("h1,h2,h3,p"); 
        var text = [];
        for (var i = 0; i < els.length; ++i) {
            text.push(els[i].textContent);
        }
             var context = text.join(" ");

var instance = new Mark(context);

因此，似乎可行的是这样的事情，我可以修改每个标签的内容并在每个标签的末尾添加一个空格或逗号，但我不知道如何实现这一点？

var context = document.querySelectorAll("h1,p"); 
      
context.forEach(element => {
  element.textContent = 'All demo classes updated.';
});
 
var instance = new Mark(context);

编辑：

下面的代码工作正常，即所有 HTML 标签都被传递到 mark.js 中，没有任何错误。但如前所述，我想在每个标签后添加一个空格或逗号，到目前为止，我在建议的解决方案中遇到了上面提到的错误。

   var context = document.querySelectorAll("h1,p"); 
     var instance = new Mark(context);

解决方法

将 javascript 更改为：

var contextText = Array.from(context).map(element => {
  return element.textContent + 'All demo classes updated.';
}).join(','); //get the text separated by comma
var instance = new Mark(contextText);