在字符串中包装字符，不包括带有 Javascript 正则表达式的链接标记

Question

编辑

这是我必须做的......

想象一下，如果我有一个带有一些 html 标签的文本（它仍然是一个字符串）：

var string = '<p>Hello, my name is Mauricio</p><p>Hi, my name is Patricia</p><p class="warn">Yeah, My name is Carl</p><a href="#"><img src="#" /></a>';

我想把所有的字母“a”都用

 <span class="ui-match"></span>

但我不能替换标签中的任何东西，也不能替换它里面的东西，也不能替换

元素。

因此，如果我想包装该字符串中的所有字母“a”，它将像这样返回：

<p>Hello, my n<span class="ui-match">a</span>me is M<span class="ui-match">a</span>uricio</p><p>Hi, my n<span class="ui-match">a</span>me is P<span class="ui-match">a</span>trici<span class="ui-match">a</span></p><p class="warn">Ye<span class="ui-match">a</span>h, My n<span class="ui-match">a</span>me is C<span class="ui-match">a</span>rl</p><a href="#"><img src="#" /></a>

所有用

包裹的字母“a”

 <span class="ui-match"></span>

，但链接和段落都没有。

这个字符串也来自一个 API，所以它是动态的……我正在搜索的这个字母是动态的，所以它可以是“a”或“abc”……它不能区分大小写

谢谢

Answer 1

我建议您将问题拆分为 2 个较小的问题：

1. 抓取所有标签的文本内容。
2. 用<span class="ui-match"></span> 包装字符

使用RegExp to parse HTML is a bad idea，但在这种情况下，由于您似乎控制输入结构，您可以使用它来简化逻辑。

使用单个 RegExp 将非常困难，因此最好使用 2 String#replace 而不是 1。一个通用的实现是这样的：

function replaceHtmlContent(str, match, replaceFn) {
  // we use the "g" and "i" flags to make it replace all occurrences and ignore case
  var re = new RegExp(match, 'gi');
  // this RegExp will match any char sequence that doesn't contain "<" or ">"
  // and that is followed by a tag
  return str.replace(/([^<>]+)(?=<[^>]+>)/g, function(s, content){
    return content.replace(re, replaceFn);
  });
}

可以抽象为：

function wrapMatch(src, match) {
  return replaceHtmlContent(src, match, function(str){
    return '<span class="ui-match">'+ str +'</span>';
  });
}

后来使用如下：

var output = wrapMatch(input, 'a');

这将给出示例输入的预期结果。

演示： http://jsbin.com/ovUFEsas/4/edit

Answer 2

如果不使用正则表达式，使用 DOM 节点会更快：

var div = document.createElement('div'),
    children;

div.innerHTML = 'Hello, my name is mauricio, and i like <a href="#">Star Wars</a>';
children = div.childNodes;

for (var i = 0, len = children.length; i < len; i++) {
    console.log(children[i]);
    if (children[i].nodeType === 3) {
        children[i].nodeValue = children[i].nodeValue.replace(/a/g, 'R');
    }
}

console.log(div.innerHTML);

注意：我在这里使用innerHTML属性作为示例方式，但是由于性能相当低，不建议利用它。

演示： http://jsfiddle.net/N7rdW/

---

更新：

根据您的更新，对于HERE 的另一个问题，您最好使用我的回答中的方法。代码有点复杂，但速度相当快（不要记住innerHTML的用法）：

var div = document.createElement('div');
div.innerHTML = 'Hello, my name is mauricio, and i like <a href="#">Star Wars</a>';

for (var i = 0, children = div.childNodes, len = children.length; i < len; i++) {
    var child = children[i];
    if (child.nodeType === 3 && child.nodeValue.indexOf('a') > -1) {
        var segments = child.nodeValue.split('a');
        for (var k = 0, lk = segments.length; k < lk; k++) {
            div.insertBefore(document.createTextNode(segments[k]), child);
            if (k < lk - 1) {
                var span = document.createElement('span');
                span.className = 'ui-match';
                span.appendChild(document.createTextNode('R'));
                div.insertBefore(span, child);
            }
        }
        div.removeChild(child);
    }
}

console.log(div.innerHTML);

演示： http://jsfiddle.net/T4ZXA/6/

Answer 3

此解决方案是否符合您的要求？

string = string.replace(/a(?![^<]*?>)/g, '<span class="ui-match">a</span>');

关于(?![^<]*?>)的一点帮助（大致是：“一些文字后面没有>”）：

(?!...)   not followed by
[^<]*     any char except "<", zero or more times
?>        until next ">"

包裹在一个函数中：

function replace(html, text, replacement) {
    // RegExp.escape : http://stackoverflow.com/q/3561493/1636522
    var re = new RegExp('(' + RegExp.escape(text) + ')(?![^<]*?>)', 'g');
    return html.replace(re, replacement);
}

var html = '<a class="azerty"> azerty &lt; azerty </a>';
html = replace(html, 'azerty', '<b>$1</b>');
// "<a class="azerty"> <b>azerty</b> &lt; <b>azerty</b> </a>"