Question

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

当一个单词是“坏词”时，我将其着色为红色。

我的问题是我的JS正在测试部门工作。当我将测试div中的ID更改为textarea div：

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

并在：

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

为：

"#user-input"

和

"user-input"

屏幕上或textarea中都没有显示任何内容。

我已经尝试了几天修理这个问题并且让自己开了墙。任何帮助或见解将不胜感激。

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

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

Answer 2

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

我想：

p.val(newInput)

备选方案：

使用带contenteditable的div而不是textarea

javascript替换textarea中的文本无法正常工作

2 个答案: