0

假设有这两个字符串：

  • 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 标记之外的字符串的正则表达式？

4

2 回答 2

5

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

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 时的首选工具。

于 2013-11-06T21:42:28.867 回答
1

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

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

基本方法是：

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

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

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

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

于 2013-11-06T23:43:41.440 回答