3

我正在尝试清理 HTML 输入字段。我想保留一些标签,但不是全部,所以我不能只.text()在读取元素值时使用。我在 Safari 中的 JavaScript 中使用正则表达式时遇到了一些问题。这是代码片段(我从另一个 SO 线程答案中复制了这段正则表达式):

aString.replace (/<\s*a.*href=\"(.*?)\".*>(.*?)<\/a>/gi, '$2 (Link->$1)' ) ;

这是失败的示例输入:

<a href="http://blar.pirates.net/black/ship.html">Go here please.</a></p><p class="p1"><a href="http://blar.pirates.net/black/ship.html">http://blar.pirates.net/black/ship.html</a></p>

这个想法是href将被拉出并作为纯文本输出到将被链接的文本旁边。所以上面的输出最终应该是这样的:

Go here please (Link->http://blar.pirates.net/black/ship.html)
http://blar.pirates.net/black/ship.html (Link->http://blar.pirates.net/black/ship.html)

但是,正则表达式在第一场比赛中一直抓取到第二个</a>标签,所以我丢失了第一行输出。(实际上,只要锚元素相邻,它就会抓取到列表的最下方。)输入是一个长字符串,而不是用 CR/LF 或任何东西分割成行。

我尝试过使用这样的非贪婪标志(注意第二个问号):

/<\s*a.*href=\"(.*?)\".*?>(.*?)<\/a>/ig

但这似乎并没有改变任何东西(至少在我尝试的少数测试器/解析器中没有,其中之一在这里: http ://refiddle.com )。也尝试过该/U标志,但没有帮助(或者这些解析器没有识别它)。

有什么建议么?

4

3 回答 3

4

模式中有几个错误和可能的改进:

/<
\s*    #  not needed (browsers don't recognize "< a" as an "a" tag)

a      #  if you want to avoid a confusion between an "a" tag and the start
       # of an "abbr" tag, you can add a word boundary or better, a "\s+" since
       # there is at least one white character after.

.      #  The dot match all except newlines, if you have an "a" tag on several
       # lines, your pattern will fail. Since Javascript doesn't have the 
       # "singleline" or "dotall" mode, you must replace it with `[\s\S]` that
       # can match all characters (all that is a space + all that is not a space)

*      #  Quantifiers are greedy by default. ".*" will match all until the end of
       # the line, "[\s\S]*" will match all until the end of the string!
       # This will cause to the regex engine a lot of backtracking until the last
       # "href" will be found (and it is not always the one you want)

href=  # You can add a word boundary before the "h" and put optional spaces around
       # the equal sign to make your pattern more "waterproof": \bhref\s*=\s*

\"     #  Don't need to be escaped, as Markasoftware notices it, an attribute
       # value is not always between double quotes. You can have single quotes or
       # no quotes at all. (1)
(.*?)
\"     # same thing
.*     # same thing: match all until the last >
>(.*?)<\/a>/gi

(1) ->关于引号和 href 属性值:

要处理单引号、双引号或无引号,您可以使用捕获组和反向引用:

\bhref\s*=\s*(["']?)([^"'\s>]*)\1

细节:

\bhref\s*=\s*
(["']?)     # capture group 1: can contain a single, a double quote or nothing 
([^"'\s>]*) # capture group 2: all that is not a quote to stop before the possible
            # closing quote, a space (urls don't have spaces, however javascript
            # code can contain spaces) or a ">" to stop at the first space or
            # before the end of the tag if quotes are not used. 
\1          # backreference to the capture group 1

请注意,您使用此子模式添加了一个捕获组,并且a标签之间的内容现在位于捕获组中 3. 考虑将替换字符串更改$2$3.

很好,你可以这样写你的模式:

aString.replace(/<a\s+[\s\S]*?\bhref\s*=\s*(["']?)([^"'\s>]*)\1[^>]*>([\s\S]*?)<\/a>/gi,
               '$3 (Link->$1)');
于 2014-01-24T04:13:01.260 回答
2

利用

href="[^"]+"

代替

href=\"(.*?)\"

基本上这会抓住任何角色,直到它遇到下一个"

虽然实现类似 markdown 语法的东西可能会更容易,这样您就不必担心删除错误的标签,只需在显示文本时将所有标签删除并用对应的 html 标签替换 markdowns。

例如,在 SO 上,您只需使用

[link text](http://linkurl.com)

并且进行替换的正则表达式将是

var displayText = "This is just some text [and this is a link](http://example.com) and then more text";
var linkMarkdown = /\[([^\]]+)\]\(([^\)]+)\)/;
displayText.replace(linkMarkdown,'<a href="$2">$1</a>');

或者使用已经制作的库来进行转换。

于 2014-01-24T02:14:13.910 回答
1

谢谢大家的建议;它对我帮助很大,并且有很多改进它的想法。

但我想我找到了原始正则表达式失败的具体原因。Casimir 的回答涉及到它,但直到我遇到这个修复时我才理解它。

我一直在错误的地方寻找问题,这里:

/<\s*a.*href=\"(.*?)\".*>(.*?)<\/a>/gi
                       ^

我可以通过在该区域后插入一个问号来修复我的原始查询a.*hre,如下所示:

/<\s*a.*?href=\"(.*?)\".*>(.*?)<\/a>/gi
        ^

我确实计划在这里使用其他建议来进一步改进我的陈述。

- C

于 2014-01-25T00:29:58.020 回答