如何使用「.replace（）」和「.html（）」將純文本轉換爲圖像標籤？

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中時，瀏覽器不會插入它，因爲它是無效標記。在一個.html()函數中使用字符串鏈中的.replace()。

$('#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>