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=":/">'));

如何更改RegExp，它应该只在HTML标记之外替换:/之类的字符串？

Answer 1

在这个简单的例子中，lookeahead断言很好：

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"

但要重复一遍：使用html时，regexp不是您的首选工具。

Answer 2

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

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

基本方法是：

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

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

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

它可能会使用一些性能改进（以及大量的代码清理），但应足以证明这一概念。

HTML：用图像替换文本微笑

2 个答案: