Как отметить слова, совпадающие со словами из списка, в текстовой области формы django с помощью javascript?

У меня следующая форма:

class TestForm(Form):
    testfield = CharField(widget=Textarea(attrs={'rows': 10, 'id': 'test'}), label='Input test text here')

Передается в мой шаблон вместе со следующим списком в качестве контекста:

dummy_list = ['hi', 'hello']

Я пытаюсь сделать кнопку, которую можно нажать в моем шаблоне, которая делает слова в форме жирными, если они содержатся в списке.

JS:

<script type="text/javascript">
function Mark_words(id)
{
    var form_content = document.getElementById(id);
    var dummylist = {{ dummy_list }}
    var new_form_content = ""
    for(var x in form_content.value) {
        if ( dummylist.indexOf(x) > -1 ){
            x = x.bold();
            new_form_content += x + " ";
        } else  {
            new_form_content += x + " ";
        }

    }
    form_content.innerText = new_form_content;
}
</script>

И следующая кнопка:

<button type = "submit" class ="btn btn-info" value = "Click" onclick="Mark_words('test')">Mark words</button>

К сожалению, когда я нажимаю на кнопку, ничего не происходит. Что я делаю неправильно?

Проблема в том, как вы итерируете содержимое textarea.

for(var x in form_content.value) будет перебирать содержимое по одному символу за раз, и поскольку вы используете in, вы получите индексы символов, а не сами символы.

Что вам нужно сделать, так это разделить строку на пробелы, так что вы итерируете по словам, и изменить in на of, так что вы получите строку, а не индекс строки:

for(var x of form_content.value.split(' '))


function Mark_words(id)
{
    var form_content = document.getElementById(id);
    var dummylist = ['hi', 'hello'];
    var new_form_content = ""
    for(let x of form_content.value.split(' ')) {
        if ( dummylist.indexOf(x) > -1 ){
            x = x.bold();
            new_form_content += x + " ";
        } else  {
            new_form_content += x + " ";
        }

    }
    form_content.innerText = new_form_content;
}
<button type = "submit" class ="btn btn-info" value = "Click" onclick="Mark_words('test')">Mark words</button>
<textarea id="test">hello there I am a new type of automated washing machine</textarea>

Вернуться на верх