2011-02-03 45 views
24

Làm cách nào để thay thế bất kỳ chuỗi nào trong jQuery?Thay thế văn bản trong trang HTML bằng jQuery

Giả sử tôi có một chuỗi "-9o0-9909" và tôi muốn thay thế bằng một chuỗi khác.

+1

bản sao có thể có của [Cách thay thế một khối HTML bằng một khối HTML khác bằng jQuery] (http://stackoverflow.com/questions/2734174/how-to-replace-a-block-of-html-with -another-block-of-html-using-jquery) trước khi đặt câu hỏi, bạn nên kiểm tra các đề xuất tự động mà hệ thống đưa ra khi nhập tiêu đề câu hỏi –

+0

bạn có thể giải thích tại sao bạn nghĩ jquery là con đường để đi - các câu trả lời cho đến nay có thể được theo dõi. – Xhalent

+0

Tôi có thể thay đổi văn bản trong trang C#, javascript và cơ sở dữ liệu và các trang html, nhưng tôi đã suy nghĩ nếu nó có thể đạt được điều đó bằng cách sử dụng jquery sau khi tải trang. Tôi đang cố gắng tiết kiệm đôi khi và tìm hiểu điều gì đó mới :) – Developer

Trả lời

53

Bạn có thể sử dụng sau đây để thay thế sự xuất hiện đầu tiên của một từ trong cơ thể của trang:

var replaced = $("body").html().replace('-9o0-9909','The new string'); 
$("body").html(replaced); 

Nếu bạn muốn thay thế tất cả các lần xuất hiện của một từ, bạn cần phải sử dụng regex và khai báo nó toàn cầu /g:

var replaced = $("body").html().replace(/-1o9-2202/g,'The ALL new string'); 
$("body").html(replaced); 

Nếu bạn muốn có một một liner:

$("body").html($("body").html().replace(/12345-6789/g,'<b>abcde-fghi</b>')); 

cơ bản Bạn đang dùng tất cả các HTML trong <body> thẻ của trang vào một biến chuỗi, sử dụng replace() để tìm và thay đổi sự xuất hiện đầu tiên của tìm thấy chuỗi với một chuỗi mới. Hoặc nếu bạn muốn tìm và thay thế tất cả các lần xuất hiện của chuỗi giới thiệu một chút regex để trộn.

See a demo here - nhìn vào phía trên cùng bên trái HTML để xem văn bản gốc, jQuery bên dưới và đầu ra ở dưới cùng bên phải.

+0

Mã mà làm việc tốt, Cảm ơn scoobler. jQuery (hàm ($) { var replace = $ ("body") html(). thay thế (/ 12212-522-1212/ig, '2121-2121-0000'); $ ("body"). html (thay thế); }); – Developer

+3

Tôi không nghĩ rằng điều này là khá hiệu quả ... chúng ta nên tìm kiếm một giải pháp tốt hơn guys! –

+6

Giải pháp này không tốt vì nó thay đổi HTML DOM. nó đang thay thế HTML hoàn chỉnh, vì vậy mọi thứ trên trang đã được chèn lại, nó rất tốt cho trang web đơn giản, nhưng nếu bạn có nhiều javascript, chúng sẽ bị hỏng, vì DOM bị thay đổi. –

13

... Tôi có chuỗi "-9o0-9909" và tôi muốn thay thế bằng chuỗi khác.

Mã bên dưới sẽ làm điều đó.

var str = '-9o0-9909'; 

str = 'new string'; 

Đùa sang một bên, thay thế các nút văn bản không nhỏ với JavaScript.

Tôi đã viết một bài đăng về điều này: Replacing text with JavaScript.

+5

Không biết tại sao câu trả lời của bạn không được chấp nhận. –

+1

Mã tại liên kết của bạn xử lý * gần như * tất cả các trường hợp. Đối với tôi, nó đã được borking trên '
' trong tập hợp ('con' là' null'), và nó cũng sẽ không thể giải thích sụp đổ trên 'splitText' bây giờ và một lần nữa với" chia bù đắp vượt quá chiều dài nút văn bản ". Ngoài ra, "canvas" được viết sai chính tả là "cavas". Tuy nhiên, +1 mặc dù. – bishop

+0

@bishop Cảm ơn, tôi chắc chắn cần cập nhật bài đăng đó. – alex

1
$("#elementID").html("another string"); 

http://api.jquery.com/html/

+0

chúng không phải lúc nào cũng giống id, có thể là tên lớp hoặc tên id khác. Nếu tôi chỉ có 1 tên lớp hoặc tên id nó sẽ không khó nhưng nó ngẫu nhiên hầu hết thời gian. – Developer

+0

Vì vậy, bạn muốn tìm kiếm toàn bộ cây HTML cho một chuỗi và thay thế nó? – vicvicvic

+0

có nhiều hơn như thế tôi đang suy nghĩ – Developer

1
var replaced = $("body").html().replace(/-1o9-2202/g,'The ALL new string'); 
$("body").html(replaced); 

cho biến:

var replaced = $("body").html().replace(new RegExp("-1o9-2202", "igm"),'The ALL new string'); 
$("body").html(replaced); 
+0

Cuối cùng tham lam multiline thay thế! Bạn đã lưu ass của tôi hôm nay! –

2

Check-out Padolsey's article on DOM find and replace, cũng như the library to implement the described algorithm.

Trong việc sử dụng mẫu này, tôi thay thế tất cả văn bản bên trong một <div id="content"> trông giống như một số điện thoại Mỹ với một liên kết tel: Đề án:

findAndReplaceDOMText(document.getElementById('content'), { 
    find:/\b(\d\d\d-\d\d\d-\d\d\d\d)\b/g, 
    replace:function (portion) { 
     var a = document.createElement('a'); 
     a.className = 'telephone'; 
     a.href = 'tel:' + portion.text.replace(/\D/g, ''); 
     a.textContent = portion.text; 
     return a; 
    } 
}); 
+0

dường như là giải pháp toàn diện nhất cho đến nay, cảm ơn! – leitasat

5

Các html thay thế ý tưởng là tốt, nhưng nếu được thực hiện vào tài liệu. nội dung, trang sẽ nhấp nháy và quảng cáo sẽ biến mất.

Giải pháp của tôi:
$("*:contains('purrfect')").each(function() { var replaced = $(this).html().replace(/purrfect/g, "purrfect"); $(this).html(replaced); });

24

Giống như những người khác đề cập trong chủ đề này, thay thế toàn bộ HTML cơ thể là một ý tưởng tồi vì nó reinserts toàn bộ DOM và có khả năng có thể phá vỡ bất kỳ javascript khác mà đã hành động theo những yếu tố này.

Thay vào đó, thay thế chỉ là văn bản trên trang web của bạn và không phải là yếu tố DOM mình bằng cách sử jQuery filter:

$('body :not(script)').contents().filter(function() { 
    return this.nodeType === 3; 
    }).replaceWith(function() { 
     return this.nodeValue.replace('-9o0-9909','The new string'); 
    }); 

this.nodeType là loại nút, chúng tôi đang tìm kiếm để thay thế nội dung của. nodeType 3 là văn bản. See the full list here.

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