替换富文本编辑器中的 HTML 标记

Replace HTML tags in rich text editor

本文关键字：HTML 标记 编辑器 文本 文本编辑 替换      更新时间：2023-10-01

我现在正在为我的项目制作富文本编辑器，我一度被困在用&lt;替换<，用&gt;替换>，用<b></b>替换[b][/b]，用<i></i>替换[i][/i]。现在我不明白如何将[img src=location]替换为<img src=location>，[a href=url]替换为<a href=url>.我希望你们理解我的问题。我迫切需要这个.谢谢

以下是我的代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#my_textarea{
    width: 300px;
    height: 150px;
    border: thin solid #000;
    color: #000;
    padding: 10px;
    min-height: 150px;
    min-width: 300px;
    max-height: 150px;
    max-width: 300px;
}
#preview{
    width: 300px;
    height: 150px;
    border: thin solid #000;
    color: #000;
    padding: 10px;
}
</style>
<script>
function formatText(tag) {
   var myTextArea = document.getElementById('my_textarea');
   var myTextAreaValue = myTextArea.value;
   var selected_txt = myTextAreaValue.substring(myTextArea.selectionStart, myTextArea.selectionEnd);
   var before_txt = myTextAreaValue.substring(0, myTextArea.selectionStart);
   var after_txt = myTextAreaValue.substring(myTextArea.selectionEnd, myTextAreaValue.length);
   myTextArea.value = before_txt + '[' + tag + ']' + selected_txt + '[/' + tag + ']' + after_txt;
}
function insertlink(){
   var linkurl = prompt("Enter the URL for this link:", "http://"); 
   var myTextArea = document.getElementById('my_textarea');
   var myTextAreaValue = myTextArea.value;
   var selected_txt = myTextAreaValue.substring(myTextArea.selectionStart, myTextArea.selectionEnd);
   var before_txt = myTextAreaValue.substring(0, myTextArea.selectionStart);
   var after_txt = myTextAreaValue.substring(myTextArea.selectionEnd, myTextAreaValue.length);
   if(linkurl != null)
   {
       myTextArea.value = before_txt + '<' + 'a href=' + linkurl + '>' + selected_txt + '</' + 'a' + '>' + after_txt;
   }
}
function insertimage(){
   var imgurl = prompt('Enter image location', ''); 
   var myTextArea = document.getElementById('my_textarea');
   var myTextAreaValue = myTextArea.value;
   var selected_txt = myTextAreaValue.substring(myTextArea.selectionStart, myTextArea.selectionEnd);
   var before_txt = myTextAreaValue.substring(0, myTextArea.selectionStart);
   var after_txt = myTextAreaValue.substring(myTextArea.selectionEnd, myTextAreaValue.length);
   if(imgurl != null)
   {
       myTextArea.value = before_txt + '[' + 'img src=' + imgurl + ']' + selected_txt + after_txt;
   }
}
function preview() {
    var textbox , view ;
    textbox = document.getElementById('my_textarea');
    view = document.getElementById("preview");
    view.innerHTML = textbox.value.replace(/'</g, '&lt').replace(/'>/g, '&gt').replace(/'[b]/g, '<b>').replace(/'['/b']/g, '</b>').replace(/'[i]/g, '<i>').replace(/'['/i']/g, '</i>')
}
</script>
</head>
<body>
<input type="button" value="Bold" onClick="formatText ('b');" /> 
<input type="button" value="Italic" onClick="formatText ('i');" /> 
<input type="button" value="Image" onClick="insertimage();" /> 
<input type="button" value="Link" onClick="insertlink();" /><br />
<textarea name="my_textarea" id="my_textarea" style="width:300px;"></textarea><br><br>
<div id="preview"></div><br>
<button id="btn" onClick="preview();">Preview</button>
</body>
</html>

演示 ： http://jsfiddle.net/cfYWE/

在大多数情况下，您可以简单地用尖括号替换每个括号。这里有一个函数可以做到这一点：

// Convert BBCode to HTML
function bbcodeToHtml(bbcode) {
    var html = bbcode;
    html = html.replace(/'[/gi, '<');
    html = html.replace(/']/gi, '>');
    return html;
}
var bbcode = '[a href=url][img src=location][/img][/a]';
bbcodeToHtml(bbcode); // returns '<a href=url><img src=location></img></a>'

要替换您列出的示例，请使用正则表达式

var exp = /'[(.*)']/;
var text = '[img src=location]';
text.replace(exp, "<$1>") // returns <img src=location>
相关文章：