javascript - HTML：用图像替换文本微笑

Question

假设有这两个字符串：

• Test message :/
• This too <a href="http://example.com">Example.com</a> :/

现在我用这样的图像替换微笑：

var message = 'Test message :/';
console.log(message.replace(/:\//ig, '<img src="smile1.png" alt=":/">'));

var message2 = 'This too: <a href="http://example.com">http://example.com</a> :/';
console.log(message2.replace(/:\//ig, '<img src="smile1.png" alt=":/">'));

我怎么能改变它应该只替换:/HTML 标记之外的字符串的正则表达式？

Answer 1

在这个简单的情况下，前瞻断言很好：

message2 = 'smile :/  <a href="http://example.com">Example.com</a> :/ <img alt=":/"> and :/'
message2.replace(/:\/(?=[^<>]*(<|$))/g, "FOO")
> "smile FOO  <a href="http://example.com">Example.com</a> FOO <img alt=":/"> and FOO"

但总的来说，结构化方法更适用于 html。遍历 DOM 树，找到文本节点并在那里进行简单的字符串替换。

对于那些想知道的人，这个正则表达式意味着

/
    :\/           a smile
    (?=           followed by
        [^<>]*    some chars but not < or >
        (         and then
            <|$   < or the end of input
        )
    )
/

要处理类似的事情http://，请再添加一个前瞻，这次是负数：“后面没有斜杠”：

message2 = 'This too: <a href="http://example.com">http://example.com</a> :/';
message2.replace(/:\/(?=[^<>]*(<|$))(?!\/)/g, "FOO")
> "This too: <a href="http://example.com">http://example.com</a> FOO"

但要重复我自己：regexp 不是您使用 html 时的首选工具。

Answer 2

我采用了另一种方法，使用 DOM API 而不是正则表达式：http: //jsbin.com/EqUTUWE/6/edit

结果有点冗长，所以我不会在这里全部粘贴（您可以查看 jsbin 代替）。

基本方法是：

• 使用 aNodeIterator遍历文档的每个文本节点
• 对于每个文本节点，创建一个DocumentFragment包含其所有文本的对应节点，以及由图像标签替换的微笑
• 用相应的片段替换文本节点。

与正则表达式相比，我看到这种方法有几个好处：

• 逃跑没有问题。浏览器将免费为我们处理。
• 无需直接使用innerHTML等操作HTML。
• 易于扩展逻辑

它可能会使用一些性能改进（和大量代码清理），但应该足以展示这个概念。