Question

我试图为图像构建一个小转换器“html to BBcode”，我需要帮助！

例如字符串：

var str = 'Hello ! <img src="/pathHere/party.png"><img src="/pathHere/sun.png">';

我正在做一个regEx来查找字符串中是否有任何图像

var reg = new RegExp(/(\w+)\.(jpg|png|gif)/gi);
var matches = str.match(reg);
console.log(matches);

在这个例子中，它会给我一个arraylike这个：

["party.png", "sun.png"]

我有一个关联数组，如：

var itemsToConvert = {
    'party.png' : ':party:',
    'sun.png'   : ':sun:',
    'cloud.png' : ':cloud:',
}

我想要实现的目标：

根据 itemsToConvert 数组的键

匹配

如果它们相同，我想用新值替换字符串

所以，在这个例子中，我的字符串将是

var convertedString = 'Hello ! :party: :sun.png:'

非常感谢任何帮助。

由于

Answer 1

最好的办法是使用Underscore JS。有很多方法可以做这种事情。例如，您的问题可以通过以下方式解决：

matches = ["party.png", "sun.png"];
var itemsToConvert = {
    'party.png' : ':party:',
    'sun.png'   : ':sun:',
    'cloud.png' : ':cloud:',
};

// Extract the keys from the associative array
var keys = _.keys(itemsToConvert);

var toConvertString = "Hello ! party.png  sun.png ";

var convertedString = toConvertString;

// For each key, replace any matches with the value from the associative array
_.each(keys, function(key) {
    var value = itemsToConvert[key];
    convertedString = convertedString.replace(key, value);
});

console.log(convertedString);  // <<== returns "Hello ! :party:  :sun: "

这与您请求的字符串不完全匹配，但我不完全确定从哪里获取关联数组。希望它能让你足够接近。

Answer 2

使用普通的javascript：

var str = 'Hello ! <img src="/pathHere/party.png"><img src="/pathHere/sun.png">';
var matches = str.match(new RegExp(/(\w+)\.(jpg|png|gif)/gi));
var itemsToConvert = {
    'party.png' : ':party:',
    'sun.png'   : ':sun:',
    'cloud.png' : ':cloud:',
}

for (m in matches) {
    m = matches[m];
    if (itemsToConvert[m] !== undefined) {
        var r = new RegExp("<img(.*?)" + m + "\\\">");
        str = str.replace(r, itemsToConvert[m]);
    }
}

console.log(str);

// Output: Hello ! :party::sun:

如果您愿意，可以在代码之间添加空格。

匹配数组中的值并替换字符串

2 个答案: