用于替换文本箭头的 Javascript 正则表达式 -> <-答案

【问题标题】：Javascript Regex for replacing text arrows -> <-用于替换文本箭头的 Javascript 正则表达式 -> <-
【发布时间】：2013-10-05 12:05:44
【问题描述】：

这是我尝试做的一个例子：

This is a paragraph of text.  
<-This is some text to be left aligned<-
This is some more text.

This is a paragraph of text.  
                       ->This is some text to be centered<-
This is some more text.

This is a paragraph of text.  
                                        ->This is some text to be right aligned->
This is some more text.

箭头字符用于（由用户）指定他们想要对齐文本的方式。到目前为止，这是我一直在整理的内容：

var text = "->This is some text to be centered<-";
var center_text = text.match("->(.*)<-");
if(center_text){
    text = '<span style="text-align:center;">'+center_text[1]+'</span>';
    console.log(text);
}

虽然这确实有效，但如果以下两种情况紧随其后，它就会中断：->TextText2 和最后一个

我需要正则表达式能够识别它应该替换每组这些箭头，即 ->TextText-> 是另一个替换项。这在javascript中可能吗？

更新：

var text = "This is a paragraph.  <-This is left aligned<-.  This is a paragraph.  ->This is center aligned<-.  This is a paragraph.  ->This is right aligned->.  This is a paragraph.  ->This is right aligned->. This is a paragraph. ->This is center aligned<-";
text = text.replace(/<-(.*?)<-/g, '<span style="text-align: left;">$1</span>');
text = text.replace(/->(.*?)<-/g, '<span style="text-align: center;">$1</span>');
text = text.replace(/->(.*?)->/g, '<span style="text-align: right;">$1</span>');

console.log(text);

这是基于以下答案，但这会中断。以下是它真正变成的样子：

This is a paragraph.  <span style="text-align: left;">This is left aligned</span>.  This is a paragraph.  <span style="text-align: right;">This is center aligned<span style="text-align: left;">.  This is a paragraph.  </span>This is right aligned<span style="text-align: right;">.  This is a paragraph.  </span>This is right aligned<span style="text-align: right;">. This is a paragraph. </span>This is center aligned</span>

如何解决这个问题，有没有更优雅的方法？

提前致谢，正则表达式不太好。抱歉，在发布此最新更新之前没有在下面看到答案。

【问题讨论】：

标签： javascript regex replace match

【解决方案1】：

你为什么打电话给String#match？您可以在单个 String#replace 通话中做到这一点：

var text = "->Text<- ->Text2<-";
var repl = text.replace(/->(.*?)<-/g, "<center>$1</center>");
//=> "<center>Text</center> <center>Text2</center>"

【讨论】：

如果<- 在文本字符串中，使用非贪婪（.*?）更接近所需的输出？
另一件事：body = 'this </is> </test>';var repl =body.replace(/<\/?(.*?)>/g, '$1'); 我明白了：this is test。使用 `body = 'this ';var repl =body.replace(//g, '$1');` 我得到：this is> </test。为什么贪婪会添加></ 而不是<></>？是因为第一个和最后一个<> 没有被捕获吗？所以在全局模式中，贪婪的中间部分总是在捕获，但边界部分不是？听起来很复杂。
body.replace(/<\/?(.*?)>/g, '$1'); 会得到你this is test

【解决方案2】：

由于您的中心、左对齐和右对齐块使用相同的分隔符，因此尝试一次仅匹配一种类型块的策略存在过度急切匹配的风险。考虑这个例子：

-> left ->
<- right <-

只需应用将->(.*?)<- 替换为<center>$1</center> 的规则将导致：

<center> left ->
</center> right <-

我认为您必须尝试同时匹配居中、左对齐和右对齐的块。像这样的东西会起作用：

var result = 
    text.replace(
        /(<-|->)(.*?)(<-|->)/g,
        function(m, l, c, r) {
            var cls = "";
            if (l == "<-" && r == "<-") {
                cls = "align-left";
            } else if (l == "->" && r == "->") {
                cls = "align-right";
            } else if (l == "->" && r == "<-") {
                cls = "align-center";
            } else if (l == "<-" && r == "->") {
                cls = "align-justify";
            }

            return '<div class="' + cls + '">' + c + '</div>';
        });

查看实际情况here。

【讨论】：

感谢您的回答，如果它没有执行，我会通知您，但看起来效果很好！

【解决方案3】：

是的，把你贪婪的.*改成懒惰的.*?：

var center_text = text.match("->(.*?)<-");

或者你也可以使用这样的东西：

var center_text = text.match("->((?:(?!<-).)*)<-");

也就是说，我想知道为什么在可以使用替换的情况下使用匹配，并且可以对所有三个对齐方式使用三个正则表达式：

var regexc = /->(.*?)<-/g;  // Regex for centre
var regexl = /<-(.*?)<-/g;  // Regex for left
var regexr = /->(.*?)->/g;  // Regex for right
var replacec = "<span style=\"text-align:center;\">'$1'</span>"; // Centre replacement
var replacel = "<span style=\"text-align:left;\">'$1'</span>";   // Left replacement
var replacer = "<span style=\"text-align:right;\">'$1'</span>";  // Right replacement

var results = text.replace(regexc, replacec).replace(regexl, replacel).replace(regexr, replacer);

jsfiddle demo

【讨论】：