Question

我正在尝试模仿Stackoverflow处理图像的方式。因此，如果文本中有图像，我会将一个包含图像描述的图像和图像放入其中：

![image description][3f5e7278-425d-4e75-9beb-59b6770b46a7]

使用Javascript我现在想要获取一段文本，获取此标记的所有匹配项，获取图像描述和uuid，并使用相应的<img标记替换标记，以便我可以将其加载到我的骨干视图。我有点像正则表达式的菜鸟。所以我从这开始：

var text = 'First some normal text ![image description][3f5e7278-425d-4e75-9beb-59b6770b46a7] and some more text here. And yet another image tag here: ![other img descript.][41f4fd84-0489-4d7a-8923-24d472008655]';
var re = new RegExp('[!\[.*\]\[.+\]]');
var m = re.exec(text);
if (m == null) {
    alert(text);
} else {
    alert('found some occurrences, but what to do with it?');
}

所以我第一次尝试正则表达式，这似乎不正确。其次，我真的不知道如何使用它来获取图像描述和uuid。

有人可以帮我解决正则表达式以及如何从中获取图像描述和uuid吗？欢迎所有提示！

[编辑] 感谢@Teneff的回答，我现在做了类似于下面的内容。不幸的是，这不起作用，因为它始终警告null。知道我在这里做错了吗？

function imgTagToHtmlTag(text) {
    var re = /!\[([^\]]+)\]\[([^\]]+)\]/g;
    var m;

    while ((m = re.exec(text)) != null) {
        if (m.index === re.lastIndex) {
            re.lastIndex++;
        }
    }
    alert(m);
    // View your result using the m-variable.
    // eg m[0] etc.
}

var text = 'First some normal text ![image description][3f5e7278-425d-4e75-9beb-59b6770b46a7] and some more text here. And yet another image tag here: ![other img descript.][41f4fd84-0489-4d7a-8923-24d472008655]';
imgTagToHtmlTag(text);

http://jsfiddle.net/ASJT6/

Answer 1

你可以这样匹配：

var re = /!\[([^\]]+)\]\[([^\]]+)\]/g;

这是example

使用全局修饰符

编辑 second example

编辑2：如果我们将uuid视为图片来源，您可以将其替换为：

var text_modifited = text.replace(re, '<img src="$2" alt="$1" />')

jsFiddle example

用于StackOverflow样式的图像标签的Javascript正则表达式？

1 个答案: