Tôi đã cố gắng thực hiện tìm kiếm đơn giản bên trong một trang HTML tĩnh bằng cách sử dụng JQuery. Tôi phải đề cập rằng đây chỉ là lần đầu tiên tôi làm việc với JQuery.Tìm kiếm JQuery trong trang HTML tĩnh với làm nổi bật từ tìm thấy

Tôi đang cố gắng để thay đổi nền của từ tìm thấy trong trang và đây là những gì tôi đã cố gắng cho đến nay:

myJavascript.js:

$(document).ready(function(){ 

    $('#searchfor').keyup(function(){ 
     page = $('#all_text').text(); 
     searchedText = $('#searchfor').val(); 
     $("p:contains('"+searchedText+"')").css("color", "white"); 
    }); 
});

Đây là HTML mã là tốt:

page.html:

<html> 
<head> 
    <title>Test page</title> 
</head> 
<body bgcolor="#55c066"> 
<input type="text" id="searchfor"></input> 
    <p id="all_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. 
    <font color="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinci futurum.</font> 
    </p> 
</body> 
    <script src="jquery-1.7.2.min.js"></script> 
    <script src="myJavascript.js"></script> 
</html>

Sau khi kiểm tra trang bằng Firebug tôi có thể thấy rằng các biến trong JQuery có được giá trị từ trường nhập liệu nhưng tôi đoán tôi đang làm rối tung phần đánh dấu.

Cảm ơn trước sự giúp đỡ của bạn!

Nguồn

2012-04-04 Radu Gheorghiu

Bạn cần phải nhấn mạnh _only_ từ hoặc cả đoạn ('p')? – mshsayem

Chỉ có từ, và tôi đã thay đổi tiêu đề thành những gì tôi thực sự muốn, làm nổi bật từ tìm thấy. –

Nếu bạn muốn nhấn mạnh chỉ từ được tìm kiếm, bạn sẽ cần bọc từ trong thẻ html như 'span' (đặt kiểu của span thành gạch chân) và thay thế nội dung của phần tử' p' – scibuff

Đỗ một cái gì đó như thế này

$("p:contains('"+searchedText+"')").each(function(i, element) { 
     var content = $(element).text(); 
     content = content.replace(searchedText, '<span class="search-found">' + searchedText + '</span>'); 
     element.html(content); 
}); 

.search-found { 
    text-decoration: underline; 
}

tái bút: điều này sẽ chỉ làm việc nếu mỗi người trong số các "yếu tố" có văn bản đơn giản chỉ nội dung nếu không nó sẽ loại bỏ trẻ em các nút

EDIT: loại bỏ các thêm ')' trong each callback

Nguồn

2012-04-04 13:00:24 scibuff

Tôi đã thử mã của bạn nhưng Firebug cho tôi một lỗi: tại dòng 6, cột 66 nhưng không có gì ở đó. Tôi thấy có nên có một tham số trong 'each()' chức năng, nhưng tôi dường như không thể hiểu nó là gì. –

có thêm ')' sau khi 'phần tử' loại bỏ một trong số đó, tức là.' Chức năng (i, phần tử) {'nhưng thành thực bạn sẽ có thể thực hiện việc sửa lỗi nhỏ này - Tôi đã cập nhật mã ở trên – scibuff

Oh , Chúa ơi .. bạn đúng vậy, tôi hoàn toàn .. Cảm ơn. –

-1

(đối với một điều bạn muốn sử dụng background-color, không màu, cho nền)

tôi sẽ tạo ra một lớp css cho bình thường và một riêng biệt (được thừa kế) lớp css cho văn bản nêu bật, và sau đó sử dụng JQuery để thay đổi lớp css khi bạn tìm thấy những gì bạn đang tìm kiếm.

Chỉ là những suy nghĩ ban đầu của tôi, không chắc chắn nếu có cách nào tốt hơn để làm điều đó.

CHỈNH SỬA: nếu bạn chỉ muốn thay đổi một từ cụ thể, bạn sẽ phải sửa đổi innerHTML để đặt nó vào một thẻ riêng biệt tại thời điểm đó.

Nguồn

2012-04-04 12:56:05 Oofpez

Ok, tôi hiểu ý tưởng của bạn. Tôi sẽ cố gắng làm một cái gì đó như thế, tôi chỉ hy vọng tôi không làm hỏng mã. –

-1

Dưới đây là một ví dụ mà tôi nhanh chóng bị hack : http://jsfiddle.net/VCJUX/

Nguồn

2012-04-04 13:19:22 alxbrd

Nó hoạt động, nhưng chỉ cho một từ .. –

Điều này thực sự là khá mát mẻ, vấn đề là; nếu bạn đang tìm kiếm một trang với bất kỳ kiểu dáng nào, nó sẽ phá vỡ toàn bộ trang bằng cách xóa tất cả các thẻ p, nhịp, liên kết, ... –

Dưới đây là của tôi: http://jsfiddle.net/x8rpY/1/

JS:

$('#searchfor').keyup(function(){ 
     var page = $('#all_text'); 
     var pageText = page.text().replace("<span>","").replace("</span>"); 
     var searchedText = $('#searchfor').val(); 
     var theRegEx = new RegExp("("+searchedText+")", "igm");  
     var newHtml = pageText.replace(theRegEx ,"<span>$1</span>"); 
     page.html(newHtml); 
    });

CSS:

#all_text span 
{ 
    text-decoration:underline; 
    background-color:yellow;  
}

Làm việc để tìm kiếm lặp lại.

Nguồn

2012-04-04 14:36:00 mshsayem

Cảm ơn, nhưng nếu tôi tìm kiếm các chữ hoa và tìm những chữ cái giống hệt như chữ thường sau đó nó chuyển đổi chữ thường thành chữ hoa. –

Tôi đã sửa nó ... – mshsayem

@mshsayem ** Mã tuyệt vời **, cảm ơn. Có thể di chuyển tài liệu đến nơi từ có trong Jquery không ?. Bởi vì tôi có một trang web lớn và tôi cần di chuyển con trỏ đến nơi từ thực tế có mặt như tính năng chrome của Google (ctrl + f5). – webblover

Tại sao sử dụng một chức năng nổi bật selfmade là một ý tưởng tồi

Lý do tại sao nó có thể là một ý tưởng tồi để bắt đầu xây dựng chức năng nổi bật của riêng bạn từ đầu là bởi vì bạn chắc chắn sẽ chạy vào các vấn đề mà những người khác đã được giải quyết.Thách thức:

Bạn sẽ cần phải loại bỏ các nút văn bản với các phần tử HTML để làm nổi bật các trận đấu của bạn mà không phá hủy DOM sự kiện và kích hoạt DOM tái sinh hơn và hơn nữa (mà sẽ được trường hợp với ví dụ innerHTML)
Nếu bạn muốn để xóa các phần tử được đánh dấu, bạn sẽ phải xóa các phần tử HTML có nội dung của chúng và cũng phải kết hợp các nút văn bản được chia nhỏ để tìm kiếm thêm. Điều này là cần thiết vì mỗi plugin highlighter tìm kiếm bên trong các nút văn bản cho các kết quả phù hợp và nếu từ khóa của bạn sẽ được chia thành nhiều nút văn bản, chúng sẽ không được tìm thấy.
Bạn cũng sẽ cần tạo các kiểm tra để đảm bảo plugin của bạn hoạt động trong các tình huống mà bạn chưa từng nghĩ đến. Và tôi đang nói về các bài kiểm tra trình duyệt chéo!

Âm thanh phức tạp? Nếu bạn muốn một số tính năng như bỏ qua một số yếu tố từ làm nổi bật, bản đồ dấu phụ, ánh xạ từ đồng nghĩa, tìm kiếm bên trong iframe, tìm kiếm từ được phân tách, v.v. điều này trở nên ngày càng phức tạp.

Sử dụng plugin hiện tại

Khi sử dụng plugin hiện có, được triển khai tốt, bạn không phải lo lắng về những thứ được đặt tên ở trên. Bài viết 10 jQuery text highlighter plugins trên Sitepoint so sánh các plugin highlighter phổ biến. Điều này bao gồm các bổ sung câu trả lời từ câu hỏi này.

Có một cái nhìn tại mark.js

mark.js là như vậy một plugin được viết bằng tinh khiết JavaScript, nhưng cũng có sẵn như là jQuery plugin. Nó được phát triển để cung cấp nhiều cơ hội hơn so với các plugin khác với các tùy chọn để:

tìm kiếm cho các từ khóa riêng biệt thay vì thời hạn hoàn thành
dấu bản đồ (Ví dụ, nếu "Justo" nên cũng phù hợp với "Justo")
bỏ qua các trận đấu bên trong yếu tố tùy chỉnh
sử dụng yếu tố làm nổi bật tùy chỉnh
sử dụng lớp tùy chỉnh làm nổi bật
từ đồng nghĩa bản đồ tùy chỉnh
tìm kiếm cũng bên trong iframe
về không tìm thấy nhận

DEMO

Hoặc bạn có thể nhìn thấy this fiddle.

Cách sử dụng ví dụ:

// Highlight "keyword" in the specified context 
$(".context").mark("keyword"); 

// Highlight the custom regular expression in the specified context 
$(".context").markRegExp(/Lorem/gmi);

Nó hoàn toàn miễn phí và phát triển mã nguồn mở trên GitHub (project reference).

Ví dụ về nhãn hiệu.js từ khóa nổi bật với mã của bạn

$(function() { 
 
    $("input").on("input.highlight", function() { 
 
    // Determine specified search term 
 
    var searchTerm = $(this).val(); 
 
    // Highlight search term inside a specific context 
 
    $("#context").unmark().mark(searchTerm); 
 
    }).trigger("input.highlight").focus(); 
 
});

mark { 
 
    background: orange; 
 
    color: black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/mark.js/7.0.0/jquery.mark.min.js"></script> 
 
<input type="text" value="test"> 
 
<div id="context"> 
 
    Lorem ipsum dolor test sit amet 
 
</div>

Nguồn

2016-05-21 14:42:48 dude

Tôi đồng ý với những gì bạn đã nói, nhưng vì câu hỏi này có từ ngày waay waay 2012, khi không có nhiều thư viện JS, đây là cách duy nhất tôi có thể hoàn thành công việc. Vì vậy, di chuyển về phía trước, bạn chắc chắn nên tìm các plugin hiện có. Nếu không, hãy bắt đầu tự tạo và chia sẻ nó! –

$(function() { 
 
    $("input").on("input.highlight", function() { 
 
    // Determine specified search term 
 
    var searchTerm = $(this).val(); 
 
    // Highlight search term inside a specific context 
 
    $("#context").unmark().mark(searchTerm); 
 
    }).trigger("input.highlight").focus(); 
 
});

mark { 
 
    background: orange; 
 
    color: black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/mark.js/7.0.0/jquery.mark.min.js"></script> 
 
<input type="text" value="test"> 
 
<div id="context"> 
 
    Lorem ipsum dolor test sit amet 
 
</div>

Nguồn

2017-04-20 10:19:41 Rajan

Tìm kiếm JQuery trong trang HTML tĩnh với làm nổi bật từ tìm thấy

Trả lời

Tại sao sử dụng một chức năng nổi bật selfmade là một ý tưởng tồi

Sử dụng plugin hiện tại

Có một cái nhìn tại mark.js

Ví dụ về nhãn hiệu.js từ khóa nổi bật với mã của bạn

Các vấn đề liên quan