Question

我正在尝试修改this answer以获取经典BCCode [img]{url}[/img]并显示其中的html图像。从我的代码片段中可以看出，我已经能够成功地执行与[b]text[/b]类似的操作。但是，出于某种原因，[img][/img]图像根本不显示。

那么，如何使用.replace()和.html()将纯文本转换为图片代码？

$('#boldText').click(function() {
  $('#bold').html(function(i, htm) {
    return htm.replace(/\[b\]/g, '<b>');
  }); // Replace opening tag
  $('#bold').html(function(i, htm) {
    return htm.replace(/\[\/b\]/g, '</b>');
  }); // Replace closing tag
});
$('#createImage').click(function() {
  $('#image').html(function(i, htm) {
    return htm.replace(/\[img\]/g, '<img src="');
  }); // Replace opening tag
  $('#image').html(function(i, htm) {
    return htm.replace(/\[\/img\]/g, '">');
  }); // Replace closing tag
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="bold">
  [b]bold text[/b]
</p>
<button id="boldText">
  Make above text bold
</button>
<p id="image">
  [img]http://i.imgur.com/mFJlvPf.jpg[/img]
</p>
<button id="createImage">
  Make above text into image
</button>

Answer 1

您的代码问题在于将字符串替换为标记两部分。当javascript尝试将<img src="或">插入html时，浏览器不会插入它，因为它是无效标记。在一个.replace()函数中使用字符串后的.html()和$('#boldText').click(function() { $('#bold').html(function(i, htm) { return htm.replace(/\[b\]/g, '<b>').replace(/\[\/b\]/g, '</b>'); }); }); $('#createImage').click(function() { $('#image').html(function(i, htm) { return htm.replace(/\[img\]/g, '<img src="').replace(/\[\/img\]/g, '">'); }); });。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="bold">
  [b]bold text[/b]
</p>
<button id="boldText">
  Make above text bold
</button>
<p id="image">
  [img]http://i.imgur.com/mFJlvPf.jpg[/img]
</p>
<button id="createImage">
  Make above text into image
</button>

Member_inf

如何使用“.replace（）”和“.html（）”将纯文本转换为图像标记？

1 个答案: