Question

这是一个非常简单的js，但我不知道从哪里开始。

在html页面中，如果某些文本用尖括号括起来，如下所示：

〈some text〉

我希望文字是彩色的（但不是括号）。

在普通的html中，我会像这样编码

〈<span class="booktitle">some text</span>〉

所以，我的问题是，我如何开始编写这样一个搜索文本并用span标签替换它的js脚本？

关于如何充分的一些基本指南。谢谢。（我知道我需要阅读整个html，找到匹配或许使用正则表达式，然后用新的替换页面。但不知道如何用js / DOM完成。我是否需要遍历每个元素，得到他们的内心文本，可以替换？一个简短的例子将不胜感激。）

Answer 1

这部分取决于你需要多么谨慎，不要在你正在穿越的元素上打扰事件处理程序。如果它是您的页面并且您可以控制处理程序，您可能不必担心;如果你正在做一个图书馆或书签或类似的，你需要非常小心。

例如，考虑这个标记：

<p>And <a href='foo.html'>the 〈foo〉 is 〈bar〉</a>.</p>

如果你这样做了：

var p = /* ...get a reference to the `p` element... */;
p.innerHTML = p.innerHTML.replace(/〈([^〉]*)〉/g, function(whole, c0) {
    return "〈<span class='booktitle'>" + c0 + "</span>〉";
});

(live example) （该示例使用unicode转义和<和>的HTML数字实体而不是上面的文字，因为JSBin doesn't like them raw，可能是编码问题）

... 工作并且非常容易（如你所见），但如果a上有一个事件处理程序，它会被吹走（因为我们'重新销毁a并重新创建它。但是，如果您的文本不复杂并且您可以控制其上的事件处理程序，那么您可能只需要这种简单的解决方案。

要（几乎）完全最小化影响将需要遍历DOM树并且仅处理文本节点。为此，您将使用Node#childNodes（用于遍历DOM），Node#nodeType（了解您正在处理的节点类型），Node#nodeValue（以获取文本）（文本节点），Node#splitText（在文本节点上，将它们分成两部分以便将其中一部分移动到span中）和Node#appendChild（以重新连接文本节点）你需要放入span;不要担心从父母那里删除它们，appendChild为你处理它们。以上内容由DOM规范（v2 here，v3 here涵盖;大多数浏览器介于两者之间;上面文本中的链接指向DOM2规范。）

你需要小心这种情况：

<p>The 〈foo <em>and</em> bar〉.</p>

...其中<和>位于p元素两侧的em的不同文本节点中;在那里，您必须将每个文本节点的一部分和整个em移动到span，最有可能。

希望这足以让你开始。

Answer 2

如果文本可以在页面中的任何位置，则必须遍历每个DOM元素，在使用正则表达式找到匹配项时拆分文本。

我已将代码放在jsfiddle上：http://jsfiddle.net/thai/RjHqe/

它的作用：它会查看您放入的节点，

如果它是元素，那么它会查看它的每个子节点。
如果是文本节点，它会找到<尖括号>中的文字。如果匹配（仅查看第一个匹配项），则将文本节点拆分为3个部分：
- left（开头括号以及之前的文字）
- middle（尖括号内的文字）
- right（结束括号及其后面的文字）
middle部分被包裹在<span>内部，而right部分正在寻找更多尖括号。

如何使用js做非常基本的语法着色？

2 个答案: