Home / Questions / 178972
Accepted
userStack
Asked: 2020-07-10 08:38:43 +0800 CST 2020-07-10 08:38:43 +0800 CST

Replace words with span in contenteditable

  • 772

I want to replace all the words with span, my code is as follows:

let written = '';
document.getElementById('test').addEventListener('keyup', function(e) {
  var palabra = written;
  written += String.fromCharCode(e.which);
  if (e.which === 32) {
    let text = document.getElementById('test').innerHTML;
    console.log(text);
    var wordsWithSpan = text.split(' ').map(function(c) {
      return '<span class="word">' + c + '</span>';
    }).join('');

    document.getElementById('test').innerHTML = wordsWithSpan;
  }

});
.word {
  color: red;
  padding-right: 2px;
}

div {
  margin: 50px;
}
<div contenteditable="true" id="test">hola mundo tierra</div>

At the moment it only works with the first attempt ( press space bar ), from the second attempt I get the text but with plainspan text labels .

What I need is to get on nodes not on text.

javascript

2 Answers

  1. Best Answer

    The problem is that every time you insert a character, you have to check for the presence of spans and remove them, to simply manipulate the text. I leave you an example:

    let written = '';
document.getElementById('test').addEventListener('keyup', function(e) {
  var palabra = written;
  written += String.fromCharCode(e.which);
  if (e.which === 32) {
    let text = document.getElementById('test');
    let spans = text.getElementsByTagName('span');
    if (spans.length > 0) {
      text = '';
      for (var i = 0; i< spans.length; i++) {
        text += spans[i].innerHTML + ' ';
      }
      text = text.substring(0, text.length - 1);
    } else {
      text = text.innerHTML;
    }
    console.log(text);
    var wordsWithSpan = text.split(' ').map(function(c) {
      return '<span class="word">' + c + '</span>';
    }).join('');

    document.getElementById('test').innerHTML = wordsWithSpan;
  }

});
    .word {
  color: red;
  padding-right: 2px;
}

div {
  margin: 50px;
}
    <div contenteditable="true" id="test">hola mundo tierra</div>

    • 2

  2. To get the text use textContent... What I do is capture the text that is displayed inside the div, and then separate it by spaces using a regular expression /[\b\s\n]+/gi, then I assign the content of the div, but this time converted to words with span.

    The problem with assigning the content again is that the position of the cursor is lost... For this you can make a function that changes the cursor.

    Note: In my example the cursor doesn't work completely right, it seems to be teleporting... After all, it's just for demonstration.

    To add spaces at the end of the word I do <a> </a>. Although I could have just added a space using innerHTML, I recommend using appendChild... For the same reason that the cursor returns to the beginning, because I am using innerHTML, and also, determining the position when there are several <span>mixed in the HTML structure is a complicated task.

    To make it clear that it is grouped in span, I put a different colored background on each word.

    function asignar_posición(div,posición)
{
	var range = document.createRange()
	var sel = window.getSelection()
	range.setStart(div, posición)
	range.collapse(true)
	sel.removeAllRanges()
	sel.addRange(range)
}
function obtener_posición_final_selección() {
	return document
		.defaultView.getSelection()
		.getRangeAt(0).startOffset
}
document.getElementById('test').addEventListener('keyup', function(e) {
	var test = document.querySelector("#test")
	var texto = document.querySelector("#test").textContent
	var posición = obtener_posición_final_selección()
	test.innerHTML = ""
	texto.split(/[\b\s\n]+/gi).map(
		function(x){
			var span = document.createElement("span")
			var a = document.createElement("a")
			span.className = "word"
			span.style["background-color"] = "#abcd"
			span.innerHTML = x
			a.innerHTML = " \n"
			test.appendChild(span)
			test.appendChild(a)
		}
	)
	try{
		asignar_posición(test,posición)
	}catch(e){}
});
    #test{
	background-color:#0123;
	font-size:33px
}
    <div contenteditable="true" id="test">hola mundo tierra</div>

    • 1