Question

我们说我有这段代码：

<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>

我想突出显示字符串ipsum的所有匹配项。我已经使用Google搜索，但只找到了突出显示单个事件的脚本。

有人对我有暗示吗？

Answer 1

你需要获得一个插件，将你的textarea内容标记为balise; 见http://codersblock.com/blog/highlight-text-inside-a-textarea/

Answer 2

事情是没有办法突出显示textarea中的文字，如果你想动态突出显示文字，我假设因为你使用<textarea>，那么你可以使用具有contenteditable的div

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

添加eventListener并在空格键按下时将每个出现的ipsum替换为<span>ipsum<span>。

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

}

请记住，可能有更优化的解决方案，这取决于您的需求。这是预览：

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>

JavaScript的;突出显示textarea中特定字符串的所有匹配项

2 个答案: