用html標簽替換textarea中的字符

Question

我正在構建一個具有需要格式化的文本區域的應用程序。 我不想使用contenteditable div，所以我認為下一個最好的解決方案是使用普通的textarea，然后再用標簽替換字符。

格式類似於Reddit或Slack。

 $( '.actionBtn' ).on('click', function(){ var cursorPos = $('#text').prop('selectionStart'); var cursorPosEnd = $('#text').prop('selectionEnd'); var v = $('#text').val(); var textBefore = v.substring(0, cursorPos ); var textSelected = v.substring( cursorPos, cursorPosEnd ); if(textSelected == "") { textSelected = "text here" } var textAfter = v.substring( cursorPosEnd, v.length ); $('#text').val( textBefore + $(this).val() + textSelected + $(this).val() + textAfter ); }); $( '#submitBtn' ).on('click', function(){ //TODO: switch to tags // * becomes <b></b> // _ becomes <i></i> // #c# becomes <span class="myClass"> </span> $('#result').html($('#text').val()) }); 

 .myClass { color: #FF0; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <div> <textarea id="text" cols="40" rows="3"></textarea> </div> <div> <input class="actionBtn" type="button" value="*" /> <input class="actionBtn" type="button" value="_" /> <input class="actionBtn" type="button" value="#c#" /> </div> <div> <input id="submitBtn" type="button" value="Submit" /> </div> <p id="result"> </p> </form> 

因此，從這個示例中，當按下Submit時，我需要：

* becomes <b></b>
_ becomes <i></i>
#c# becomes <span class="myClass"> </span>

我該怎么辦？ 謝謝

Answer 1

您可以使用正則表達式輕松替換字符串中偶數/奇數出現的位置。 例如：

const regex = /\_(.*?)\_/gm;
const str = `Lorem _ipsum_ dolor sit amet, _consectetur adipiscing_ elit, sed 
do _eiusmod_ tempor `;
const subst = `<em>$1</em>`;

// The substituted value will be contained in the result variable
const result = str.replace(regex, subst);
console.log('Substitution result: ', result);

在線檢查

Answer 2

這可以做更多：

 var tags = { "*": ["<b>", "</b>"], "_": ["<span class='myClass'>", "</span>"] } var el = document.getElementById("editor"), val = htmlize(el.value), display = document.getElementById("display"); display.innerHTML = val; el.addEventListener("change", function(){ val = htmlize(el.value); display.innerHTML = val; }); function htmlize(content){ for(var i in tags){ var reg = "\\\\"+i+"\\\\s?(\\\\w+)"; reg = new RegExp(reg, "g"); content = content.replace(reg, function(match, w){ return tags[i][0]+w+tags[i][1]; }); } return content; } 

 <textarea id="editor"> I'm so great * awesome dude and _ fantastic person. You * Should know this </textarea> <p id="display"></p>