Question

假设我们有以下字符串：

<p>Hello, I am a cool string.</p>
<p>Here I want to show an image: {{ img("path/to/file.jpg", "Title Text") }}</p>

结果应该是：

<p>Hello, I am a cool string.</p>
<p>Here I want to show an image: <img src="path/to/file.jpg" alt="Title Text" /></p>

我知道，我可以用javascripts字符串替换函数和正则表达式做到这一点，但不是真的如何做到这一点。基本上是这样的：

string.replace(/???/g, '<img src="$1" alt="$2" />');

但我找不到合适的正则表达式，因为我是一个正则表达式的新手:(

{{ img\((.*)\) }}会找到img-code，但是如何过滤属性？

我正在编写一个TinyMCE插件，它应该像bb-code插件一样工作，但是使用自定义的非bb代码语法。

Answer 1

您可以使用：

var s = '<p>Here I want to show an image: {{ img("path/to/file.jpg", "Title Text") }}</p>';

var r = s.replace( /{{ img\( *"([^"]+)" *, *"([^"]+)" *\) *}}/g, 
  '<img src="$1" alt="$2" />' );
//=> <p>Here I want to show an image: <img src="path/to/file.jpg" alt="Title Text" /></p>

Answer 2

您可以使用以下内容：

var str = '<img src="path/to/file.jpg" alt="Title Text" />';
var exp = /<.*img.*"(.*)".*"(.*)".*>/g;
var newStr = str.replace(exp,'<img src="$1" alt="$2" />');
console.log(newStr);

这与您的示例更匹配应该有助于找出最适合您需求的模式。

var str2 = '<p>Here I want to show an image: {{ img("path/to/file.jpg", "Title Text") }}</p>';
var exp2 = /{{.*img.*"(.*)".*"(.*)".*}}/g;
var newStr2 = str2.replace(exp2,'<img src="$1" alt="$2" />');
console.log(newStr2);

JavaScript正则表达式 - 替换字符串中的自定义标记

2 个答案: