วิธีแก้ปัญหาที่นำเสนอนี้ค่อนข้างแย่
- คุณไม่สามารถใช้ regex ได้เนื่องจากวิธีนี้คุณค้นหา / ไฮไลต์ในแท็ก html
- คุณไม่สามารถใช้ regex ได้เนื่องจากไม่สามารถทำงานกับ UTF * ได้อย่างถูกต้อง (อะไรก็ตามที่มีอักขระที่ไม่ใช่ภาษาละติน / อังกฤษ)
- คุณไม่สามารถทำ innerHTML.replace ได้เพราะจะใช้ไม่ได้เมื่ออักขระมีสัญกรณ์ HTML พิเศษเช่น
&สำหรับ & <สำหรับ <, >for> äสำหรับä, öสำหรับö üสำหรับü ßสำหรับßเป็นต้น
สิ่งที่คุณต้องทำ:
ห่วงผ่านเอกสาร HTML ค้นหาโหนดข้อความทั้งหมดได้textContentรับตำแหน่งของไฮไลท์ข้อความด้วยindexOf(กับตัวเลือกtoLowerCaseถ้ามันควรจะเป็นกรณีตาย) ทุกอย่างผนวกก่อนที่จะindexofเป็นtextNodeผนวกข้อความตรงกับช่วงไฮไลท์ และทำซ้ำสำหรับส่วนที่เหลือของโหนดข้อความ (สตริงไฮไลต์อาจเกิดขึ้นหลายครั้งในtextContentสตริง)
นี่คือรหัสสำหรับสิ่งนี้:
var InstantSearch = {
"highlight": function (container, highlightText)
{
var internalHighlighter = function (options)
{
var id = {
container: "container",
tokens: "tokens",
all: "all",
token: "token",
className: "className",
sensitiveSearch: "sensitiveSearch"
},
tokens = options[id.tokens],
allClassName = options[id.all][id.className],
allSensitiveSearch = options[id.all][id.sensitiveSearch];
function checkAndReplace(node, tokenArr, classNameAll, sensitiveSearchAll)
{
var nodeVal = node.nodeValue, parentNode = node.parentNode,
i, j, curToken, myToken, myClassName, mySensitiveSearch,
finalClassName, finalSensitiveSearch,
foundIndex, begin, matched, end,
textNode, span, isFirst;
for (i = 0, j = tokenArr.length; i < j; i++)
{
curToken = tokenArr[i];
myToken = curToken[id.token];
myClassName = curToken[id.className];
mySensitiveSearch = curToken[id.sensitiveSearch];
finalClassName = (classNameAll ? myClassName + " " + classNameAll : myClassName);
finalSensitiveSearch = (typeof sensitiveSearchAll !== "undefined" ? sensitiveSearchAll : mySensitiveSearch);
isFirst = true;
while (true)
{
if (finalSensitiveSearch)
foundIndex = nodeVal.indexOf(myToken);
else
foundIndex = nodeVal.toLowerCase().indexOf(myToken.toLowerCase());
if (foundIndex < 0)
{
if (isFirst)
break;
if (nodeVal)
{
textNode = document.createTextNode(nodeVal);
parentNode.insertBefore(textNode, node);
}
parentNode.removeChild(node);
break;
}
isFirst = false;
begin = nodeVal.substring(0, foundIndex);
matched = nodeVal.substr(foundIndex, myToken.length);
if (begin)
{
textNode = document.createTextNode(begin);
parentNode.insertBefore(textNode, node);
}
span = document.createElement("span");
span.className += finalClassName;
span.appendChild(document.createTextNode(matched));
parentNode.insertBefore(span, node);
nodeVal = nodeVal.substring(foundIndex + myToken.length);
}
}
};
function iterator(p)
{
if (p === null) return;
var children = Array.prototype.slice.call(p.childNodes), i, cur;
if (children.length)
{
for (i = 0; i < children.length; i++)
{
cur = children[i];
if (cur.nodeType === 3)
{
checkAndReplace(cur, tokens, allClassName, allSensitiveSearch);
}
else if (cur.nodeType === 1)
{
iterator(cur);
}
}
}
};
iterator(options[id.container]);
}
;
internalHighlighter(
{
container: container
, all:
{
className: "highlighter"
}
, tokens: [
{
token: highlightText
, className: "highlight"
, sensitiveSearch: false
}
]
}
);
}
};
จากนั้นคุณสามารถใช้งานได้ดังนี้:
function TestTextHighlighting(highlightText)
{
var container = document.getElementById("testDocument");
InstantSearch.highlight(container, highlightText);
}
นี่คือตัวอย่างเอกสาร HTML
<!DOCTYPE html>
<html>
<head>
<title>Example of Text Highlight</title>
<style type="text/css" media="screen">
.highlight{ background: #D3E18A;}
.light{ background-color: yellow;}
</style>
</head>
<body>
<div id="testDocument">
This is a test
<span> This is another test</span>
äöüÄÖÜäöüÄÖÜ
<span>Test123äöüÄÖÜ</span>
</div>
</body>
</html>
โดยวิธีการที่ถ้าคุณค้นหาในฐานข้อมูลที่มีLIKE,
เช่นWHERE textField LIKE CONCAT('%', @query, '%')[ซึ่งคุณไม่ควรทำคุณควรใช้ Fulltext ค้นหาหรือ Lucene] จากนั้นคุณสามารถหลบหนีตัวละครทุกตัวมี \ และเพิ่ม SQL หนีคำสั่งวิธีการที่ คุณจะพบอักขระพิเศษที่เป็นนิพจน์ LIKE
เช่น
WHERE textField LIKE CONCAT('%', @query, '%') ESCAPE '\'
และคุณค่าของ @query ไม่ใช่'%completed%'แต่'%\c\o\m\p\l\e\t\e\d%'
(ทดสอบแล้วใช้งานได้กับ SQL-Server และ PostgreSQL และระบบ RDBMS อื่น ๆ ทั้งหมดที่รองรับ ESCAPE)
รุ่นแก้ไขสคริปต์รุ่น:
namespace SearchTools
{
export interface IToken
{
token: string;
className: string;
sensitiveSearch: boolean;
}
export class InstantSearch
{
protected m_container: Node;
protected m_defaultClassName: string;
protected m_defaultCaseSensitivity: boolean;
protected m_highlightTokens: IToken[];
constructor(container: Node, tokens: IToken[], defaultClassName?: string, defaultCaseSensitivity?: boolean)
{
this.iterator = this.iterator.bind(this);
this.checkAndReplace = this.checkAndReplace.bind(this);
this.highlight = this.highlight.bind(this);
this.highlightNode = this.highlightNode.bind(this);
this.m_container = container;
this.m_defaultClassName = defaultClassName || "highlight";
this.m_defaultCaseSensitivity = defaultCaseSensitivity || false;
this.m_highlightTokens = tokens || [{
token: "test",
className: this.m_defaultClassName,
sensitiveSearch: this.m_defaultCaseSensitivity
}];
}
protected checkAndReplace(node: Node)
{
let nodeVal: string = node.nodeValue;
let parentNode: Node = node.parentNode;
let textNode: Text = null;
for (let i = 0, j = this.m_highlightTokens.length; i < j; i++)
{
let curToken: IToken = this.m_highlightTokens[i];
let textToHighlight: string = curToken.token;
let highlightClassName: string = curToken.className || this.m_defaultClassName;
let caseSensitive: boolean = curToken.sensitiveSearch || this.m_defaultCaseSensitivity;
let isFirst: boolean = true;
while (true)
{
let foundIndex: number = caseSensitive ?
nodeVal.indexOf(textToHighlight)
: nodeVal.toLowerCase().indexOf(textToHighlight.toLowerCase());
if (foundIndex < 0)
{
if (isFirst)
break;
if (nodeVal)
{
textNode = document.createTextNode(nodeVal);
parentNode.insertBefore(textNode, node);
}
parentNode.removeChild(node);
break;
}
isFirst = false;
let begin: string = nodeVal.substring(0, foundIndex);
let matched: string = nodeVal.substr(foundIndex, textToHighlight.length);
if (begin)
{
textNode = document.createTextNode(begin);
parentNode.insertBefore(textNode, node);
}
let span: HTMLSpanElement = document.createElement("span");
if (!span.classList.contains(highlightClassName))
span.classList.add(highlightClassName);
span.appendChild(document.createTextNode(matched));
parentNode.insertBefore(span, node);
nodeVal = nodeVal.substring(foundIndex + textToHighlight.length);
}
}
}
protected iterator(p: Node)
{
if (p == null)
return;
let children: Node[] = Array.prototype.slice.call(p.childNodes);
if (children.length)
{
for (let i = 0; i < children.length; i++)
{
let cur: Node = children[i];
if (cur.nodeType === Node.TEXT_NODE)
{
this.checkAndReplace(cur);
}
else if (cur.nodeType === Node.ELEMENT_NODE)
{
this.iterator(cur);
}
}
}
}
public highlightNode(n:Node)
{
this.iterator(n);
}
public highlight()
{
this.iterator(this.m_container);
}
}
}
การใช้งาน:
let searchText = document.getElementById("txtSearchText");
let searchContainer = document.body;
let highlighter = new SearchTools.InstantSearch(searchContainer, [
{
token: "this is the text to highlight"
className: "highlight",
sensitiveSearch: false
}
]);
highlighter.highlightNode(td2);