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标签之外的字符串的RegExp ？

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不是你选择的工具.