我正在构建的应用程序具有需要格式化的文本区域。我不想使用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>
我该怎么做?谢谢
答案 0 :(得分: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);
答案 1 :(得分:1)
这还可以做:
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>