如何解决粗体/斜体/下划线用户文本输入
我有一个文本输入,我使用DOM来获取文本,我显示了文本。问题是我希望用户能够加粗/斜体/下划线某些单词或部分文本。我正在考虑让用户在文本周围写粗体/ ITALIC / UNDERLINE,搜索此词的索引,然后使用javascript应用更改。我已经可以完成前两个步骤,但是我不知道如何应用更改。
我在寻找用document.createElement("B");
用javascript粗体显示文本的方法,但是使用此方法很复杂,因为它只是特定的单词或句子。
var bold = {}; var bld = 0;
var str = 'string BOLD of BOLD the ITALIC input text ITALIC that i UNDERLINE get UNDERLINE using dom';
var show = document.createElement("P");
//Here I use .includes() and .matchAll() to get an array with all the indexes
var regexp = new RegExp("BOLD","g");
let arraybold = [...str.matchAll(regexp)].map(a => a.index);
//ex: arraybold[0] = 7 and arraybold[1] = 15.
for(key in arraybold) {
bld = bld + 1;
}
regexp = new RegExp("ITALIC","g");
let arrayitalic = [...str.matchAll(regexp)].map(a => a.index);
regexp = new RegExp("UNDERLINE","g");
let arrayunderline = [...str.matchAll(regexp)].map(a => a.index);
//Here I'm suppose to create the bold/italic/underline tags on the specific words.
for(i = 1; i <= (bld/2); i++) {
var bold[i] = document.createElement("B");
bold[i].innerText = str.slice(arraybold[i]+4,arraybold[i+1]);
//str.replace(the part of the text with the bold tag that i create);
}
show.innerText = str;
document.body.appendChild(show);
Ps:我不能使用innerHTML,因为稍后会使用dom。我更喜欢使用香草javascript。 预期结果:
//<p>string <strong> of </strong> the <i> input text </i> that i <u> get</u> using dom</p>
修改:按照@cpprookie的建议,使用let代替var
解决方法
尝试拆分字符串并用结构类似于chain: 'None'
的数据填充数组,最后根据类型字段生成节点。
- 首先拆分并遍历整个字符串。根据相应的关键字(BOLD / ITALIC / UNDERLINE)填充textList;
<style>
a { text-decoration: none; } a:link { color: #200772; font-weight: normal; text-decoration: none; } a:hover { color: #FF8000; font-weight: normal; text-decoration: none; } table { margin: 0; border-collapse: collapse; color: #0d0c0c; font: 10pt verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif; } th { font: 10pt verdana,sans-serif; color: #f7f9fa; font-weight: normal; background-color: #0a1ef7; border: 1px solid #cccccc; margin: 0; padding: 4px 10px 4px 5px; text-align: left; } td { color: #0d0c0c; font: 8pt verdana,sans-serif; border-bottom: 1px solid #cccccc; margin: 0; /* padding: 6px 20px 1px 0; */ padding: 8px 20px 5px 5px; } td.userinput { color: #0d0c0c; font: 10pt verdana,sans-serif; font-weight: bold; border-bottom: 0px; margin: 0; padding: 6px 20px 1px 0; } td.errormsg { color: red; font: 10pt verdana,sans-serif; font-weight: bold; border-bottom: 0px; margin: 0; padding: 6px 20px 1px 0; } td.msg { color: #747170; font: 10pt verdana,sans-serif; font-weight: bold; border-bottom: 0px; margin: 0; padding: 6px 20px 1px 0; } #t01 tr:nth-child(even) {background-color: #eee;}#t01 tr:nth-child(odd) {background-color: #fff;}
</style>
- 根据textList中的类型创建节点。
{ text: 'string',type: 'noStyle/BOLD/ITALIC/UNDERLINE' }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。