JS：替换包含不同值的字符串

Question

我有这个挑战：

我需要用这个字符串替换这个字符串："[[OM:random-string-id]]"：'<div id="random-string-id"></div>'

其中 OM 是要替换的组件 TYPE，random-string-id 是 id。这两个部分都可以是动态的，我只需要将组件替换为类型：'OM'。

# pseudocode

var text = [[$A:$B]] # this can be: "[[OM:something]]", "[[AD:somethingelse]]"

if ($A == 'OM') {
  text = text.replace(<div id='$B'></div>)
}

输入：[[OM:something]] => Output: "<div id='something'></div>" 输入：[[AD:somethingelse]] => Output: "[[AD:somethingelse]]"

最好的处理方法是什么？

Answer 1

使用内置replace的replacer功能：

let str = "[[OM:random-string-idadsad]]"

str = str.replace(/^\[\[([A-Z]+):(.*)\]\]$/i, function(match, group1, group2, offset, string) {
  if (!group1 || !group2) { //or check arguments.length, if less than 5 return..
    return;
  }
  if (group1.toUpperCase() === "OM") {
    return "<div id='" + group2 + "'></div>"
  } else {
    return string;
  }
})

console.log(str)

Answer 2

关于正则表达式 ...

.../^\[\[OM\:([^\]]+)\]\]$/...

• 首先trims 每个字符串...然后...

• /^ ... $/ ...从字符串的开头到结尾查找...

• \[\[OM\:... 两个左括号，后跟 OM 和一个 : ... 然后
• ([^\]]+)... 捕获/记住任何不是] 的字符序列...
• 后跟 ...\]\] 两个右括号。

function replaceSomething(str) {
  return str.trim().replace(
    (/^\[\[OM\:([^\]]+)\]\]$/),
    ((...result) => `<div id="${ result[1] }"></div>`)
  );
}

const listOfInputValues = ['[[OM:something]]', '[[AD:somethingelse]]', '[[OM:something]]', '[[AD:somethingelse]]'];

const listOfOutputValues = listOfInputValues.map(replaceSomething);

console.log('listOfOutputValues : ', listOfOutputValues);

.as-console-wrapper { min-height: 100%!important; top: 0; }

在与 Ibrahim Tanyalcin 讨论后，将上面给出的方法迭代为更通用的方法（因此更灵活），Ibrahim 选择的示例归结为类似的东西......

function createMarkupWithCapturedId(match, id) {
  return ['<div id="', id, '"></div>'].join('');
}
function transformTagByName(tagName, tag) {
  const regX = RegExp('^\\[\\[' + tagName + '\\:([^\\]]+)\\]\\]$');
  return tag.trim().replace(regX, createMarkupWithCapturedId);
}

console.log(`'[[OM:random-string-idadsad]]' => '${ transformTagByName('OM', '[[OM:random-string-idadsad]]') }'`);

console.log(`'[[AD:random-string-idadsad]]' => '${ transformTagByName('OM', '[[AD:random-string-idadsad]]') }'`);

console.log(`'[[OM:random-string-idadsad]]' => '${ transformTagByName('AD', '[[OM:random-string-idadsad]]') }'`);

console.log(`'[[AD:random-string-idadsad]]' => '${ transformTagByName('AD', '[[AD:random-string-idadsad]]') }'`);

.as-console-wrapper { min-height: 100%!important; top: 0; }

Answer 3

名称描述了错误的类型，.name 的值可以是：EvalError、RangeError、ReferenceError、SyntaxError、TypeError 和 URIError。您可以根据 .name 属性返回的错误类型决定以不同方式处理错误。