Javascript，使用正则表达式仅替换 HTML 标签之外的内容

Question

我正在尝试用 JavaScript 编写一个正则表达式来替换 HTML 标签之外的字符串，并忽略 HTML 标签内的字符串。

这是我的 JavaScript 代码:

var content = "Hi, my <span user="John">name</span> is &nbsp;John";
var user = 'John';
var regex = new RegExp('(&nbsp;)?' + user,'g');
content.replace(regex, function($0,$1){
    return $1 ? $0 : '<img src="images/user.png">';
});

我的正则表达式是 "( )?John" .

该模式按照我想要的方式工作，但它将匹配应用于我不想要的标签数据。

因此，我们的想法是忽略标签之间的所有内容:<和 > ，并忽略: John .

可以吗？

Answer 1

描述

这个正则表达式将匹配 John前提是它位于字符串的开头或结尾和/或两边都有空格。

匹配 John 的正则表达式:(?:\s| |^)(John)(?=\s|\r|\n|$)

此正则表达式合并了最后一个正则表达式，并且还匹配所有 html 标记和纯文本 url。这里的顺序很重要，因为 John只有在 html 标记之外或未嵌入 URL 时才会匹配。

正则表达式:https?:\/\/[^\s]*|<\/?\w+\b(?=\s|>)(?:='[^']*'|="[^"]*"|=[^'"][^\s>]*|[^>])*>|\&nbsp;John|(John)

如果你采用最后一个正则表达式并通过你的函数传递它，那么只有 John标签和 url 之外的 s 将被替换为字符串。

Javascript 示例

工作示例:http://repl.it/J4T

代码

var content = "<span name=\"John\" funnytag:John>John John &nbsp;John DoeJohn JohnDoe Mr.JohnDoe http://cool.guy.john/LikesKittens</span>";
var rePattern = /https?:\/\/[^\s]*|<\/?\w+\b(?=\s|>)(?:='[^']*'|="[^"]*"|=[^'"][^\s>]*|[^>])*>|\&nbsp;John|(John)/gi;

content.replace(rePattern, function(match, capture) {
    return capture ? "<img src=\"images/user.png\">" : match;
});

输出

<span name="John" funnytag:John><img src="images/user.png"> <img src="images/user.png"> &nbsp;John Doe<img src="images/user.png"> <img src="images/user.png">Doe Mr.<img src="images/user.png">Doe http://cool.guy.john/LikesKittens</span>