使用 JavaScript 高亮插件的困难答案

【问题标题】：Difficulty Using JavaScript Highlight Plugin使用 JavaScript 高亮插件的困难
【发布时间】：2016-07-04 03:03:30
【问题描述】：

我正在尝试使用一个名为 mark.js (https://markjs.io/) 的插件。从我的角度来看，我正在做他们所说的一切，但 Chrome 控制台不断返回错误：

我的html代码如下：

<!doctype html>
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/7.0.0/mark.min.js"></script>
        <script src="highlighter.js"></script>
    </head>
    <body>
        <p>hello i am rob</p>
    </body>
</html>

我的 javascript 代码，在一个名为“highlighter.js”的文件中，如下所示：

var context = document.querySelector(".context");
var instance = new Mark(context);
instance.mark("rob");

插件网站截图：

我不知道我做错了什么。感谢您的帮助！

【问题讨论】：

标签： javascript html google-chrome plugins

【解决方案1】：

你必须有一个 .context 的类名，它才能将其识别为上下文。

var context = document.querySelector(".context"); // <p> tag class name
var instance = new Mark(context);
instance.mark("rob");

<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/7.0.0/mark.min.js"></script>

<!-- notice the class="context" on the paragraph tag -->
<p class="context">hello i am rob</p>

https://jsfiddle.net/e6yzpton/

要标记整个文档，您可以执行以下操作：

var context = document.querySelector("body");
var instance = new Mark(context);
var paragraph = document.getElementsByTagName("p")[0].innerHTML;
instance.mark(paragraph);

<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/7.0.0/mark.min.js"></script>

<body>
    <p>and it was all yellow</p>
</body>

https://jsfiddle.net/e6yzpton/2/

【讨论】：

如何指定整个文档？
既然你帮了我，也许你也可以帮我解决这个相关的问题：stackoverflow.com/questions/38178774/…