2010-08-23 36 views
5

我试图突出显示“Textarea”中的一段文字。 我在文本区的长字符串:突出显示TextArea中的一段字符串

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident 

而且我有一个功能,可以提取第一个字符串出现那就是“开始”和“结束”瓦尔之间。例如:

extract("ipsum", "consectetur") // This will give: "dolor sit amet," 

但是,我要的是选择函数的结果使生成的字符串“悲坐阿梅德,”将突出显示。

可能吗? 我该怎么做?

谢谢,

问候。

+0

突出显示,我想你的意思是选择? – 2010-08-23 16:11:02

回答

2

我记得看到这个前一阵子...... http://www.din.or.jp/~hagi3/JavaScript/JSTips/Mozilla/Samples/NSHTMLTextAreaElement.htm

其相当复杂。我一直很困扰我的头轮它。不知道,如果这是你需要的,或者如果你可以使用它。 :)

+0

不错的托马斯。 – 2010-08-23 16:11:39

+0

看起来不错,但它是否适用于IE 6/7/8? (目前无法测试。) – 2010-08-23 16:37:47

+1

不,它甚至不会尝试支持IE。 – 2010-08-23 16:40:18

2

你不能在textarea中突出显示文本的不同部分。您可以选择一个零件而不是多个零件,并选择不突出显示。你可以把你的文字区域和内容,但它的<div>例如通过与<span class="highlight">...</span>

+0

OP没有要求突出显示前两个字符串。他想突出他们之间的文字。 – MarkHu 2012-07-03 23:41:16

4

他们周围突出短语下面是一些代码,将在一个文本在所有主要的浏览器选择一个文本范围,包括IE 6+ :

function offsetToRangeCharacterMove(el, offset) { 
    return offset - (el.value.slice(0, offset).split("\r\n").length - 1); 
} 

function setSelection(el, start, end) { 
    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") { 
     el.selectionStart = start; 
     el.selectionEnd = end; 
    } else if (typeof el.createTextRange != "undefined") { 
     var range = el.createTextRange(); 
     var startCharMove = offsetToRangeCharacterMove(el, start); 
     range.collapse(true); 
     if (start == end) { 
      range.move("character", startCharMove); 
     } else { 
      range.moveEnd("character", offsetToRangeCharacterMove(el, end)); 
      range.moveStart("character", startCharMove); 
     } 
     range.select(); 
    } 
} 

var textarea = document.getElementById("your_textarea"); 
var val = textarea.value; 
var start = val.indexOf("ipsum") + 5, end = val.indexOf("consectetur"); 
setSelection(textarea, start, end); 
+0

除了'+ 5'大概是第一个字符串的长度,所有的都不错。这与在http://stackoverflow.com/questions/1981088/set-textarea-selection-in-internet-explorer – MarkHu 2012-07-03 23:49:38

+0

@MarkHu答案之一中的算法非常相似:“+ 5”就是这样,为了简洁起见。使用''ipsum“.length'代替它似乎有点奇怪。与我认为的其他答案的相似性可能是从我的一个借口([这一个])的情况下(http://stackoverflow.com/questions/3622818/ies-document-selection-createrange-doesnt-include-例如前导式或尾随式)。 – 2012-07-04 08:27:03

相关问题