Tôi đã phải làm điều này một vài tháng trước, ban đầu một người nào đó sử dụng thao tác chuỗi của innerHTML như đề xuất của những người khác ở đây nhưng con đường dẫn đến điên rồ. tên lớp hoặc id. Chúng tôi cũng không muốn mangle bất kỳ javascript nhúng nào và vô tình gây ra đánh dấu không hợp lệ. Cũng cần phải xử lý nhúng phong cách css. Cuối cùng bạn kết thúc viết một trình phân tích cú pháp văn bản cho HTML4.0 + ECMAscript + css, ngay cả trong trường hợp giới hạn, là rất nhiều công việc - nó viết trình duyệt web của riêng bạn - IN JAVASCRIPT!
Nhưng chúng tôi đã có trình phân tích cú pháp HTML + JS + CSS trong trình duyệt web tạo ra cây DOM đẹp cho chúng tôi. Vì vậy, tôi quyết định sử dụng nó. Đây là những gì tôi đã đưa ra cuối cùng:
keywords = ['hello world','goodbye cruel world'];
function replaceKeywords (domNode) {
if (domNode.nodeType === Node.ELEMENT_NODE) { // We only want to scan html elements
var children = domNode.childNodes;
for (var i=0;i<children.length;i++) {
var child = children[i];
// Filter out unwanted nodes to speed up processing.
// For example, you can ignore 'SCRIPT' nodes etc.
if (child.nodeName != 'EM') {
replaceKeywords(child); // Recurse!
}
}
}
else if (domNode.nodeType === Node.TEXT_NODE) { // Process text nodes
var text = domNode.nodeValue;
// This is another place where it might be prudent to add filters
for (var i=0;i<keywords.length;i++) {
var match = text.indexOf(keywords[i]); // you may use search instead
if (match != -1) {
// create the EM node:
var em = document.createElement('EM');
// split text into 3 parts: before, mid and after
var mid = domNode.splitText(match);
mid.splitText(keywords[i].length);
// then assign mid part to EM
mid.parentNode.insertBefore(em,mid);
mid.parentNode.removeChild(mid);
em.appendChild(mid);
}
}
}
}
Miễn là bạn cẩn thận về lọc những thứ bạn không muốn xử lý (ví dụ, các nút văn bản trống chỉ chứa khoảng trắng - có rất nhiều người trong số họ, tin tôi đi) điều này rất nhanh.
Bộ lọc bổ sung không được triển khai cho rõ ràng về thuật toán - còn lại dưới dạng bài tập cho người đọc.
Sắp xếp các bản sao của http://stackoverflow.com/questions/1972409 (từ cùng một người) ngoại trừ câu hỏi đó hỏi làm thế nào để làm điều này trong PHP, trong khi điều này hỏi về cách làm điều đó trong Javascript. – MatrixFrog
nhưng sau đó nó không phải là một dupe. 2 ngôn ngữ khác nhau của nó :) – ajsie