jQuery是一種JavaScript庫,用于簡化HTML文檔遍歷和操作、事件處理、動畫和AJAX等操作。其中一個很常見的操作就是選中文本并進行強調。以下是一個基礎的選中文本強調的jQuery示例:
$(document).ready(function(){ $('#myText').on('mouseup', function(){ var selectedText = window.getSelection().toString(); wrapSelectedText(selectedText); }); function wrapSelectedText(text){ var newText = '<span class="highlight">' + text + '</span>'; var oldText = $('#myText').html(); var replacedText = oldText.replace(text, newText); $('#myText').html(replacedText); } });
以上代碼的作用是在id為“myText”的元素上監聽鼠標抬起(mouseup)事件。在事件觸發時,通過window.getSelection()方法獲取被選中的文本內容,然后將其包裹在一個帶有.Highlight類的span標簽里。最后,用新的包裹后的文本替換原先的元素內容。
注意,以上示例是純前端驗證。如果您的應用程序需要從后端驗證數據,可以考慮以下步驟:
- 發送用戶輸入到服務器端。
- 在后端驗證和過濾用戶輸入。
- 將驗證后的文本返回給前端。
- 在前端將文本包裹成Highlighted文本。
這樣可以避免一些XSS攻擊,防止惡意代碼加入文本內容。
上一篇css常用的背景屬性
下一篇css延時執行動畫