使選定文本變粗使用JavaScript

我有我的標記文本：使選定文本變粗使用JavaScript

<div> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Vestibulum condimentum consectetur tellus, at bibendum felis ultrices eu. 
Nullam nibh urna, euismod a blandit ut, fermentum a leo. Maecenas pharetra elementum fringilla. 
Quisque condimentum, nibh quis elementum porttitor, magna libero malesuada dolor, ut feugiat tortor lectus ac turpis. Integer tristique molestie enim, sit amet commodo risus tempus non. 
</div>

當用戶選擇了文本，按下CTRL +回車我想選定的文本與<b></b>標籤包裹。我得到了選定的文本，但無法找到如何用標記包裝它。這裏是我有：

function getSelectedText() { 
    if (window.getSelection) { 
     return window.getSelection().toString(); 
    } 
    else { 
     if (document.selection) { 
      return document.selection.createRange().text; 
     } 
    } 
    return ''; 
} 

$ (document).ready (function() { 

    // User pressed a key 
    $ (document).keydown (function(e) { 
     // is it CTRL+ENTER? 
    if (e.which == 13 && e.ctrlKey) { 
      alert('You have selected ' + getSelectedText()); 
      // now I need to highlight the text I got 
      // ???? 
    } 
    }); 
});

請注意！一個簡單的查找/替換不會，如果用戶選擇了一個可以在文本中找到10次的'a'字母，我想突出顯示他選擇的唯一'a'。我研究了範圍對象，但無法弄清楚如何實現它，請幫助我。

請參閱演示jsfiddle。

來源

2011-03-18 Silver Light

也許這可以幫助你：http://code.google.com/p/rangy/

的examples之一是你什麼了。

來源

2011-03-18 12:04:03 Jamiec

您可以使用document.execCommand()。這裏是我對類似問題的回答：Javascript: how to un-surroundContents range

來源

2011-03-18 12:40:05

這可以工作（在Chrome中），但只要調用一次即可！

（在http://jsfiddle.net/HaD6k/運行的代碼）

$(document).keypress(function(e) { 
    if (e.which == 13 && e.ctrlKey) { 
     var s = getSelection(); 
     var i = s.baseOffset; 
     var j = s.extentOffset; 
     var t = $('div').text(); 
     var t0 = t.substring(0, i) + '<span class="b">' + 
       t.substring(i, j) + '</span>' + 
       t.substring(j); 
     $('div').html(t0); 
    } 
});

它只能使用一次的原因是因爲它修改DOM以添加標記，這意味着圍繞選擇偏移下一次和元素是不連續的。我仍然在看...

來源

2011-03-18 13:28:34 Alnitak

使選定文本變粗使用JavaScript

回答

相關問題