javascript替换textarea中的文本不起作用

Question

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

当一个词是“坏词”时，我将其涂成红色。

我的问题是我的 JS 在 Test Div 中工作。当我将 ID 从 test div 更改为 textarea div 时：

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

进入：

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

到：

"#user-input"

和：

"user-input"

屏幕上和文本区域都没有显示。

我已经尝试解决这个问题几天了，但我却把自己逼到了墙角。任何帮助或见解将不胜感激。

HTML：

<!-- 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>

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

        })    

Answer 1

尝试使用val 而不是追加或替换

我认为：

p.val(newInput)

替代方案：

使用带有contenteditable 的 div 而不是 textarea

Answer 2

使用 Input 更改 Textarea，因为我认为我们无法使用 Textarea 进行更改