2010-08-23 35 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

相關問題