在一个字符串遍历中将大文本中的 **title** 转换为 <h1>title</h1> 的最佳方法是什么？ [复制]

Question

假设有一大段文字，转换规则为：

• **title** 到 <h1>title</h1>

• :blush: 到 <img class="emoji" title="blush" src="/img/blush.png"/>

如何在一次遍历中进行转换？

Answer 1

使用不同的捕获组在 1 个正则表达式中捕获不同的模式，并使用替换功能检查不同的捕获组：

var input = '**Hey** Oh you! :blush:';
document.write(input.replace(/\*\*([^*]*)\*\*|:(happy|blush):/ig, function(match, title, smiley) {
  if (title != undefined) {
    return '<h2>' + title + '</h2>';
  } else if (smiley != undefined) {
    return '<img class="emoji" title="blush" src="/img/' + smiley + '.png" />';
  }
}));

这是此页面上仅有一次遍历的唯一答案。请注意，它不会捕捉到这个：

var text = '**title with :blush: smiley** gotcha!';

Answer 2

标题

var re_title = /\*\*(.+)\*\*/g;
str.replace(re_title, '<h1>$1</h1>')

表情符号

var re_emoji = /:(.+):/g;
str.replace(re_emoji, '<img class="emoji" title="$1" src="/img/$1.png"/>')

您可以通过一个接一个地进行替换来将它们组合在一起。

str.replace(re_title, '<h1>$1</h1>').replace(re_emoji, '<img class="emoji" title="$1" src="/img/$1.png"/>')

样本

var str = '**title** :some_emoji:'
str.replace(re_title, '<h1>$1</h1>').replace(re_emoji, '<img class="emoji" title="$1" src="/img/$1.png"/>')
// output = "<h1>title</h1> <img class="emoji" title="some_emoji" src="/img/some_emoji.png"/>"

var str = '**:some_emoji: **'
str.replace(re_title, '<h1>$1</h1>').replace(re_emoji, '<img class="emoji" title="$1" src="/img/$1.png"/>')
// output = "<h1><img class="emoji" title="some_emoji" src="/img/some_emoji.png"/></h1>"

由于无法命名捕获组，因此无法使用“a|b”正则表达式语法进行替换。

Answer 3

你可以试试这个：

<div id="replace">**title**some text :blush: some link </div>
var str= $("#replace").html();    
str = str.replace("**title**", "<h1>title</h1>");     
str = str.replace(":blush:", "<img class="emoji" title="blush" src:"/img/blush.png"/>");     
$("#replace").html(str);    

Answer 4

您可以使用正则表达式来解决这个问题。

var mystring = 'some text **title** some other text';
var re = /\*{2}(\w*)\*{2}/g;
mystring.replace(re, "<h1>$1</h1>");

这里正则表达式搜索任何以两个 * 开头并以两个 * 结尾的模式。中间部分被捕获并在replace方法中使用。

Answer 5

执行此类操作的最佳方法是regex - 它是针对每种语言的此类任务的非常优化的机制。

根据您的示例在 javascript 中：

>>> "**title** qweqwe **foo** ololo **bar**".replace(/(\*\*(\w+)\*\*)/g, "<h1>$2</h1>")
"<h1>title</h1> qweqwe <h1>foo</h1> ololo <h1>bar</h1>"

和

":blush: qweqwe :tongue: ololo :smile:".replace(/(\:(\w+)\:)/g, '<img class="emoji" title="$2" src:="/img/$2.png"/>')
"<img class="emoji" title="blush" src:="/img/blush.png"/> qweqwe <img class="emoji" title="tongue" src:="/img/tongue.png"/> ololo <img class="emoji" title="smile" src:="/img/smile.png"/>"

多多！