Home / Questions / 175514
Accepted
userStack
Asked: 2020-06-25 16:55:20 +0800 CST 2020-06-25 16:55:20 +0800 CST

Each word inside a div

  • 772

I'm implementing a spellchecker, I have a wrapper where each new spelled word is placed in a new div, instead of being placed as ordinary text.

I am putting each word in a div, so that the word suggestions are displayed, is this necessary? or can I put it in span? or on no label?

With div I achieve the display of suggestions, when I try with span it does NOT work .

enter image description here

enter image description here

To see the functionality, type any word and press the space bar

let written = '';
document.getElementById('parent').addEventListener('keypress', function(e) {

  written += String.fromCharCode(e.which);

  if (e.which === 32) {
    let newDivWord = document.createElement('div');

    newDivWord.appendChild(document.createTextNode(written));
    newDivWord.classList.add('root');
    newDivWord.id = document.getElementById('parent').childElementCount + 1;
    document.getElementById('parent').appendChild(newDivWord);
    console.log(document.getElementById('parent'));
    written = "";
  }
})
#parent>div {
  border-color: yellow;
  float: left;
}

.root {
  padding-right: 2px;
}
<div id="parent" contenteditable=true style="border: black 2px solid; height:200px">
  <div class="root" id="1">Qué</div>
  <div class="root" id="2">es</div>
  <div class="root" id="3">Lorem</div>
  <div class="root" id="4">Ipsum</div>
</div>

should the typed text that is not inside the new div be deleted?

The future functionality of my problem would be: , but if you help me I would be infinitely grateful.

The text What is Lorem Ipsum if I type 'hello' before lorem it should be 'What is hello Lorem Ipsum', in its own div.

The text What is Lorem Ipsum if I type 'hello' after Ipsum it should be 'What is Lorem Ipsum hello', in its own div.

The text What is Lorem Ipsum if I type 'hello' before 'WHAT' it should be 'hello What is Lorem Ipsum hello', in a div of its own.

The text What is Lorem Ipsum if I type 'hello' before 'sum' it should be 'hello What is Lorem Iphola sum hello', a div would be created for Iphola and sum would be another div.

What I need now in the present: I want the new word not to be repeated, one of them is the writing of the normal text, and the other repetition is the creation of the new div, and the new div should be added at the end.

javascript

2 Answers

  1. Best Answer

    One thing you can do is use getSelection()to get the active text node, and from there edit its content (with getSelection().focusNode().textContent).

    For example, the following demo removes the word that was inserted, but it has a couple of problems: 1) it leaves the space blank (I think it's because of the type of event, but I've tested with keyupit and it fails, I have to see why it is); and 2) move the cursor to the beginning of the text node (may not be a problem if the word is inserted at the beginning, but somewhat inconvenient if it is at the end).

    I leave it in case it serves as a base while I try to improve it:

    let written = '';
document.getElementById('parent').addEventListener('keypress', function(e) {

  // guardamos la palabra
  var palabra = written;
  written += String.fromCharCode(e.which);

  if (e.which === 32) {
  
    // seleccionamos el nodo activo
    var sel = window.getSelection();
    // eliminamos la palabra recien escrita
    sel.focusNode.textContent = sel.focusNode.textContent.replace(palabra, "");
    
    let newDivWord = document.createElement('div');

    newDivWord.appendChild(document.createTextNode(written));
    newDivWord.classList.add('root');
    newDivWord.id = document.getElementById('parent').childElementCount + 1;
    document.getElementById('parent').appendChild(newDivWord);
    console.log(document.getElementById('parent'));
    written = "";
  }
})
    #parent>div {
  border-color: yellow;
  float: left;
}

.root {
  padding-right: 2px;
}
    <div id="parent" contenteditable=true style="border: black 2px solid; height:200px">
  <div class="root" id="1">Qué</div>
  <div class="root" id="2">es</div>
  <div class="root" id="3">Lorem</div>
  <div class="root" id="4">Ipsum</div>
</div>

    • 1

  2. I just did some validation by running your code, because I have a similar need to create an element that makes it easy for me to dynamically add keyword families.
    I noticed that if I try to edit any existing word, it is replaced and additionally the changes are added to the end. I imagine that is not the desired behavior .

    Initial text: What is Loren Ipsum
    I edit as: It remains as Loren Ipsum
    The container shows: It remains as Loren Ipsum gives as
    And the cursor stays inside the first container,

    With dev tools I inspected the elements and find that the string Quda comoremains in the first div and two new ones are added at the end <div class="root">da</div> and <div class="root">as</div> So your code needs to cater for the possibility of existing containers being edited and eventually editing between two of them.

    Regarding your question, it seems to me that between containers there can only be spaces and or punctuation characters (separators) since your interest, I suppose, must be to catch the words. So if eventually there is some free text left, it should be inserted into a container instead of deleting it.

    • 0