在String中包装字符，不包括使用Javascript Regex的Link标记 [英] Wrap character in String, excluding a Link tag with Javascript Regex

问题描述

编辑

继续我要做的事情......

heres what i have to do...

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

Imagine if i have a text with some html tags inside it (it is still a string):

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>';

我想用

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

但我不能替换标签中的任何内容，也不能替换标签内的任何内容，也不能替换标签中的任何内容。

元素。

but i must not replace anything from the tag, neither what is inside it, neither the class in the

element.

因此，如果我想从该字符串中包装所有字母a，它将返回如下：

So if I want to wrap all the letters "a" from that string, it would return like that:

<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......它一定不能区分大小写

also this string is comming from a API, so its dynamic... this letter i'm searching is dynamic, so it can be "a" or "abc"... it must not be case sensitive

谢谢

推荐答案

我建议你把问题分成两个小的问题：

I would recommend you to split the problem into 2 smaller problems:

1. 抓取所有标签的文字内容。


2. 用< span class =ui-match>< / span>

1. grab text content of all tags.
2. wrap chars with <span class="ui-match"></span>

使用< a href =https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454#1732454>解析HTML的RegExp是坏 idea 但在这种情况下，因为您似乎控制输入结构，您可以使用它来简化逻辑。

Using RegExp to parse HTML is a bad idea but in this case since you seem to control the input structure you might use it to simplify the logic.

使用单一的RegExp会非常困难，所以最好做2 String＃replace in而不是一个。通用实现如下：

Using a single RegExp for it will be really hard, so it's also better to do 2 String#replace instead of one. A generic implementation would be like:

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');

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

which would give the expected result for the example input.

DEMO： http://jsbin.com/ovUFEsas/4/edit

这篇关于在String中包装字符，不包括使用Javascript Regex的Link标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！