とテキストノードに私は少しテキストノード持っている:挿入HTMLにはJavaScript
var node
をそして私は「笑」のすべての発生の周りにスパンをラップします。
node.nodeValue = node.nodeValue.replace(/lol/, "<span>lol</span>")
それ私はspan要素として"lol"
をしたいときには、"<span>lol<span>"
を出力します。
とテキストノードに私は少しテキストノード持っている:挿入HTMLにはJavaScript
var node
をそして私は「笑」のすべての発生の周りにスパンをラップします。
node.nodeValue = node.nodeValue.replace(/lol/, "<span>lol</span>")
それ私はspan要素として"lol"
をしたいときには、"<span>lol<span>"
を出力します。
あなたは、あなただけのinnerHTMLプロパティを使用できるようにして、親ノードであることをnode
が必要になる場合があります。ここ
node.innerHTML=node.childNodes[0].nodeValue.replace(/lol/, "<span>lol</span>");
node.childNodes[0]
は、実際のテキストノードを指し、node
はその含む要素です。
次の記事はあなたのHTML要素とテキストを置換するためのコードを与える:
http://blog.alexanderdickson.com/javascript-replacing-text
記事から:
var matchText = function(node, regex, callback, excludeElements) {
excludeElements || (excludeElements = ['script', 'style', 'iframe', 'canvas']);
var child = node.firstChild;
do {
switch (child.nodeType) {
case 1:
if (excludeElements.indexOf(child.tagName.toLowerCase()) > -1) {
continue;
}
matchText(child, regex, callback, excludeElements);
break;
case 3:
child.data.replace(regex, function(all) {
var args = [].slice.call(arguments),
offset = args[args.length - 2],
newTextNode = child.splitText(offset);
newTextNode.data = newTextNode.data.substr(all.length);
callback.apply(window, [child].concat(args));
child = newTextNode;
});
break;
}
} while (child = child.nextSibling);
return node;
}
使用法:
matchText(document.getElementsByTagName("article")[0], new RegExp("\\b" + searchTerm + "\\b", "g"), function(node, match, offset) {
var span = document.createElement("span");
span.className = "search-term";
span.textContent = match;
node.parentNode.insertBefore(span, node.nextSibling);
});
と説明を:
は基本的に、それを行うための正しい方法は、すべてのテキストノードを超える...
- 反復です。
- テキストノード内の部分文字列を検索します。
- オフセットで分割します。
- スプリットの間にスパン要素を挿入します。
Andreas Josasさんの回答はかなり良いです。しかし、同じテキストノードに検索用語が何度も現れたとき、コードにはいくつかのバグがありました。ここにこれらのバグが修正されたソリューションがあります。さらに、挿入がmatchTextに組み入れられ、より使いやすく理解しやすくなりました。新しいタグだけがコールバックに構築され、returnによってmatchTextに渡されます。
バグ修正と更新matchText機能:
var matchText = function(node, regex, callback, excludeElements) {
excludeElements || (excludeElements = ['script', 'style', 'iframe', 'canvas']);
var child = node.firstChild;
while (child) {
switch (child.nodeType) {
case 1:
if (excludeElements.indexOf(child.tagName.toLowerCase()) > -1)
break;
matchText(child, regex, callback, excludeElements);
break;
case 3:
var bk = 0;
child.data.replace(regex, function(all) {
var args = [].slice.call(arguments),
offset = args[args.length - 2],
newTextNode = child.splitText(offset+bk), tag;
bk -= child.data.length + all.length;
newTextNode.data = newTextNode.data.substr(all.length);
tag = callback.apply(window, [child].concat(args));
child.parentNode.insertBefore(tag, newTextNode);
child = newTextNode;
});
regex.lastIndex = 0;
break;
}
child = child.nextSibling;
}
return node;
};
使用法:
matchText(document.getElementsByTagName("article")[0], new RegExp("\\b" + searchTerm + "\\b", "g"), function(node, match, offset) {
var span = document.createElement("span");
span.className = "search-term";
span.textContent = match;
return span;
});
あなたがアンカー(リンク)を挿入することを望む場合には、spanタグの代わりにタグであるように要素を作成し変更します「 "の代わりに" span "を追加し、タグにhref属性を追加する行を追加し、リンク内にリンクが作成されないようにexcludeElementsリストに 'a'を追加します。
regexを再利用するときにregexをリセットするために 'regex.lastIndex = 0'という修正を追加しました。 http://stackoverflow.com/questions/1520800/why-regexp-with-global-flag-in-javascript-give-wrong-results – Jeff
これは良い答えではありませんが、完全性のために私が行ったことを投稿しています。私の場合は、特定の#textノードでハイライトしなければならないテキストのオフセットを既に調べています。これはまた、ステップを明確にします。
//node is a #text node, startIndex is the beginning location of the text to highlight, and endIndex is the index of the character just after the text to highlight
var parentNode = node.parentNode;
// break the node text into 3 parts: part1 - before the selected text, part2- the text to highlight, and part3 - the text after the highlight
var s = node.nodeValue;
// get the text before the highlight
var part1 = s.substring(0, startIndex);
// get the text that will be highlighted
var part2 = s.substring(startIndex, endIndex);
// get the part after the highlight
var part3 = s.substring(endIndex);
// replace the text node with the new nodes
var textNode = document.createTextNode(part1);
parentNode.replaceChild(textNode, node);
// create a span node and add it to the parent immediately after the first text node
var spanNode = document.createElement("span");
spanNode.className = "HighlightedText";
parentNode.insertBefore(spanNode, textNode.nextSibling);
// create a text node for the highlighted text and add it to the span node
textNode = document.createTextNode(part2);
spanNode.appendChild(textNode);
// create a text node for the text after the highlight and add it after the span node
textNode = document.createTextNode(part3);
parentNode.insertBefore(textNode, spanNode.nextSibling);
それをおかげで、それは私にとって最高の答えでした – romuleald
この場合、テキストノードにHTMLコンテンツを追加する必要があります –
@ArunPJohnyどうすればよいですか? – alt
@ JacksonGariety - テキストノードを新しいDOMスパン要素とテキストノードに置き換えるか、親のinnerHTMLプロパティを変更する必要があります。あなたの試したものを投稿してください。 – RobG