javascript替换文本区域中的文本不工作

我的应用程序在textarea div中获取用户的输入，调用API，然后返回值。返回的值被推送到badWords数组中，然后与用户的输入进行比较。如果存在匹配项，则认为某个单词拼写错误或是“坏单词”

当一个词是“坏词”时，我就把它涂成红色

我的问题是我的JS正在测试Div中工作。当我将ID从测试Div更改为中的textarea Div时：

$('#test').append(str);

以及：

var p = document.getElementById('test');

致：

以及：

屏幕上和文本区域中均未显示任何内容

几天来，我一直在努力解决这个问题，现在我自己都快累坏了。任何帮助或见解都将不胜感激

HTML:

JS/JQ：

var str = $("#user-input").val().trim();
$('#test').append(str);

// Stores the bad words or error words
var badWords = [];

// Stores the better words to be used for improvement
var betterWords = [];

// Looping through the results returned by API
for (var i = 0; i < response.errors.length; i++) {

badWords.push(response.errors[i].bad)
betterWords.push(response.errors[i].better)
}

var p = document.getElementById('test');
            var newInput = p.innerHTML
            console.log(newInput);

            badWords.forEach(function (bWord) {
                console.log('bad word ', bWord);
                newInput = newInput.replace(bWord, `<span class="color badword">${bWord}<span class="tooltiptext">try :'${betterWords}</span></span>`)
            });

            p.innerHTML = newInput

        })    

var str=$（“#用户输入”）.val（）.trim（）；
$（'#test'）。追加（str）；
//存储坏字或错误字
var badWords=[]；
//存储用于改进的更好的词语
var betterWords=[]；
//循环遍历API返回的结果
对于（var i=0；i

使用输入更改Textarea，因为我认为我们无法使用Textarea

尝试使用

val

而不是追加或替换

我认为：

p.val（新输入）

备选方案：

---

将div与

contenteditable

一起使用，而不是使用textarea

可以提供fiddle或code snipset吗？不能在textarea中添加跨距。这是无效的HTMLI很快做了一个代码笔。现在什么都不起作用了：我打算建议这样做，但你不能在文本区域内添加跨文本颜色我认为这应该附加HTML标记，这可能是所需的输出在我将文本设置为颜色，并进入输入的同一字段后，我想能够悬停在红色单词上，请参阅建议替换列表，我想你可以继续使用codepen.io并尝试编写一些代码来帮助我们。基本上，用尽可能少的代码演示您的问题，试图专注于您的确切问题。实际上，我在输入方面也有同样的问题，但我也会尝试这个。我离开了输入，因为我已经在上面的某个地方读过了，所以如果您想动态地调整字段，最好在jquery中使用textarea

"user-input"

<!-- Test Div -->
<!-- Here is where the input is going -->
<div id="test"></div>

<!-- Textarea Div -->
<!-- I want user input to go here -->
<textarea id="user-input" class="input-class" type="text" placeholder="Enter your bad grammar"></textarea>

var str = $("#user-input").val().trim();
$('#test').append(str);

// Stores the bad words or error words
var badWords = [];

// Stores the better words to be used for improvement
var betterWords = [];

// Looping through the results returned by API
for (var i = 0; i < response.errors.length; i++) {

badWords.push(response.errors[i].bad)
betterWords.push(response.errors[i].better)
}

var p = document.getElementById('test');
            var newInput = p.innerHTML
            console.log(newInput);

            badWords.forEach(function (bWord) {
                console.log('bad word ', bWord);
                newInput = newInput.replace(bWord, `<span class="color badword">${bWord}<span class="tooltiptext">try :'${betterWords}</span></span>`)
            });

            p.innerHTML = newInput

        })