HTML：用图像替换文本微笑答案

【问题标题】：HTML: Replace text smiles by imagesHTML：用图像替换文本微笑
【发布时间】：2013-11-18 08:34:42
【问题描述】：

假设有这两个字符串：

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 标记之外的 :/ 之类的字符串？

【问题讨论】：

5、4、3中关于RegExp和HTML的queue cmets，
是的，我知道这个讨论，但是你能告诉我如何解决这个问题吗？整个页面/应用程序仅在客户端运行。
你想用什么替换它？
一切都在客户端存储和处理。你最后一个问题的意思是什么？

标签： javascript html regex dom

【解决方案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 时的首选工具。

【讨论】：

非常感谢！现在有道理了，我认为^ 用来表示模式以.. 开头。我不明白这部分[^<>]*
@thg435 感谢您提供此解决方案以及出色的可视化/描述！我在输入示例时犯了一个小错误。我没有在链接中包含像:/ 这样的微笑也是可能的=> 更新了我的帖子。你能检查我的更新吗？

【解决方案2】：

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

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

基本做法是：

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

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

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

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

【讨论】：