JavaScript; 突出显示文本区域中特定字符串的所有出现

Question

Let's say I have this code:

<textarea style="width:300px;height:200px">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ipsum eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ipsum ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in ipsum reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur ipsum sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit ipsum anim id est laborum.</textarea>

I want to highlight all occurrences of the string ipsum . I already googled but only found scripts that highlight a single occurrence only.

Does anybody have a hint for me?

Answer 1

You need to get a plugin that tokenize your textarea content into balise; See http://codersblock.com/blog/highlight-text-inside-a-textarea/

Answer 2

Thing is there is no way to highlight text in textarea , if you want to highlight text dynamically, as I assume because you use <textarea> , then you could use div with contenteditable

<div style="width:300px;height:400px" id='text' contenteditable='true'>
     Lorem ipsum dolor sit amet....
</div>

add eventListener and replace every occurence of ipsum to <span>ipsum<span> on space key press.

var textElem = document.getElementById("text");

textElem.onkeyup = function(e) {
  if (e.keyCode == 32) { //check on space press 
    higlight(this);
  }
}

function higlight(element) {
  var text = element.innerHTML;
  var newString = text.replace(/ipsum/g, "<span class='highlight'>ipsum</span>");
  element.innerHTML = newString;
  setEndOfContenteditable(element); // set cursor at the end of contenteditable

}

Keep in mind that there may be more optimized solution, it depends on your requiremients. Here is preview:

 var textElem = document.getElementById("text"); textElem.onkeyup = function(e) { if (e.keyCode == 32) { //check on space press higlight(this); } } function higlight(element) { var text = element.innerHTML; var newString = text.replace(/ipsum/g, "<span class='highlight'>ipsum</span>"); element.innerHTML = newString; setEndOfContenteditable(element); } higlight(textElem); // to set cursor at the end of contentEditable function setEndOfContenteditable(contentEditableElement) { var range, selection; if (document.createRange) //Firefox, Chrome, Opera, Safari, IE 9+ { range = document.createRange(); //Create a range (a range is a like the selection but invisible) range.selectNodeContents(contentEditableElement); //Select the entire contents of the element with the range range.collapse(false); //collapse the range to the end point. false means collapse to end rather than the start selection = window.getSelection(); //get the selection object (allows you to change selection) selection.removeAllRanges(); //remove any selections already made selection.addRange(range); //make the range you have just created the visible selection } else if (document.selection) //IE 8 and lower { range = document.body.createTextRange(); //Create a range (a range is a like the selection but invisible) range.moveToElementText(contentEditableElement); //Select the entire contents of the element with the range range.collapse(false); //collapse the range to the end point. false means collapse to end rather than the start range.select(); //Select the range (make it the visible selection } } 

 .highlight { background: yellow; } #text { background: white; border: 1px solid black; } 

 <div style="width:300px;height:400px" id='text' contenteditable='true'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ipsum eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ipsum ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in ipsum reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur ipsum sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit ipsum anim id est laborum.</div>