粗体/斜体/下划线用户文本输入

问题描述

我有一个文本输入，我使用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' }