Question

我有字符串format，其中包含数字{0}，{1}，{2}。我希望这些数字被输入类型placeholder = "Outside,beautiful,blue"中占位符所写的单词替换，即format[i+1]的值等于字符串words的索引（包含单词）在占位符）。并在控制台中得到这样的结果：

外面是如此美丽，蓝天，美丽的大自然和蓝色太平洋旁边的房子......

HTML：

<!Doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta name="viewport" content="width=device-width">
        <meta charset="utf-8">
        <title>Exercises in JS</title>
        <script src="exercises.js"></script>
    <body>
        <label for="myText">Input array:</label>
            <input type="text" name="wordcount" id="myText" placeholder = "Outside,beautiful,blue" value="" />
        <a href="#" id="sub">Submit</a>
    </body>
    </head>
</html>

Javacript代码：

window.onload = function(){

inputBox = document.getElementById("myText");
btn = document.getElementById('sub');   

btn.addEventListener("click",function(event){
event.preventDefault();
    stringFormat(inputBox.value);   
});

    str = inputBox.value;
    var format = '{0} is so {1} with {2} sky, {1} nature and house next to the {2} pacific ocean...';

    function stringFormat(str) {
        var words = document.getElementById("myText").placeholder.split(",");

        for (var i = 0; i < format.length; i++) {
            if (format[i] === '{' && format[i+1] == '0') {
                format = format.replace(format[i+1], words[i]);        
            }

            else if (format[i] === '{' && format[i+1] > '0') {
                format = format.replace(format[i+1], words['$[i]']);
            }
        }
        console.log(format);       
    }
}

Answer 1

听起来像是正则表达式的工作：

＆＃13;

str = "{0} is so {1} with {2} sky, {1} nature and house next to the {2} pacific ocean..."

words = 'Outside,beautiful,blue'.split(',')

result = str.replace(/{(\d+)}/g, m => words[m[1]]);

console.log(result)

＆＃13;

如果没有正则表达式，它也可能是单行代码：

＆＃13;

str = "{0} is so {1} with {2} sky, {1} nature and house next to the {2} pacific ocean..."

words = 'Outside,beautiful,blue'.split(',')

result = words.reduce((str, word, n) => str.split('{' + n + '}').join(word), str);

console.log(result)

＆＃13;

Answer 2

有两种方法可以做到这一点：

循环遍历字符串中的占位符，检索等效的单词。使用String#replace的回调函数和正则表达式非常容易。
循环显示单词并使用单独的操作将"{" + indexOfWord + "}"替换为相关单词。

我使用＃1，看起来像这样：

function stringFormat(str, words) {
    return str.replace(/\{(\d+)\}/g, function(m, c0) {
        return words[c0] || "";
    });
}

详细说明：

正则表达式/\{(\d+)}/查找模式{n}，其中n是一个数字，并捕获捕获组中的n。
replace使用其找到的整体匹配的参数调用其回调函数（例如，"{0}"），后跟任何捕获组的值。由于我们在数字周围有一个捕获组，我们得到的第二个参数将只是那些数字，例如"0"。
我们使用它来索引words数组（记住，数组索引不是真正的数字，因为数组aren't really arrays，我们正在使用它很好一个字符串）来查找相应的单词。
如果占位符没有匹配的字词，如果""为words[c0]，我们会使用curiously-powerful || operator获取undefined。
我们返回我们想要用于每次替换的字符串，replace为我们添加结果字符串。

（上面的两个链接都是我贫穷的小博客。）

示例：

＆＃13;

function stringFormat(str, words) {
  return str.replace(/\{(\d+)\}/g, function(m, c0) {
    return words[c0] || "";
  });
}

console.log(
  stringFormat(
    "{0} is so {1} with {2} sky, {1} nature and house next to the {2} pacific ocean...",
    "Outside,beautiful,blue".split(",")
  )
);

＆＃13;

但如果你更喜欢＃2，它也完全可行;您仍然必须使用正则表达式来替换所有占位符：

function stringFormat(str, words) {
    words.forEach(function(word, index) {
        // (Have to escape `{` because it's a quantifier)
        str = str.replace(new RegExp("\\{" + index + "}", "g"), word);
    });
    return str;
}

在该示例中，我们必须转义{，因为它在正则表达式中具有特殊含义。（我们也可以逃避}，但我们不必这样做;只有当它与未转义的{配对时才具有特殊意义。）

示例：

＆＃13;

function stringFormat(str, words) {
  words.forEach(function(word, index) {
    // (Have to escape `{` because it's a quantifier)
    str = str.replace(new RegExp("\\{" + index + "}", "g"), word);
  });
  return str;
}

console.log(
  stringFormat(
    "{0} is so {1} with {2} sky, {1} nature and house next to the {2} pacific ocean...",
    "Outside,beautiful,blue".split(",")
  )
);

＆＃13;

但是你想要转义word中正则表达式中特殊的任何字符，如果有的话（我上面没有打扰），以及它需要多次通过字符串。总的来说，＃1。

字符串的返回值

2 个答案: