[英]JavaScript: Remove HTML Tags, Modify Tags/Text, and Insert Tags Back In
我试图找到一种方法来删除HTML文档中的所有标签,存储它们的位置,修改剩余的文本,然后将标签重新插入它们所属的位置。
关键点
/<(?:.|\\n)*?>/gm
)可以工作,但它也会错误地捕获<
或>
包含在html中的
/<[^<|>]*>/g
),但我读到使用regex并不是解析html的好方法。 在某些情况下会失败吗? 完整代码:
function foo() {
var elementHtml = document.body.innerHTML;
var tags = [];
var tagLocations = [];
//var htmlTagRegEx =/<{1}\/{0,1}\w+>{1}/;
var htmlTagRegEx =/<[^<]*>/;
//Strip the tags from the elementHtml and keep track of them
var htmlTag;
while (htmlTag = elementHtml.match(htmlTagRegEx)) {
console.log('htmlTag: ', htmlTag);
tagLocations[tagLocations.length] = elementHtml.search(htmlTagRegEx);
tags[tags.length] = htmlTag;
elementHtml = elementHtml.replace(htmlTag, '');
}
}
为避免混淆,以下是我要完成的工作的详细说明:
在整个(外部)网站(不包括标签)的文本中搜索字符串,然后更改这些实例的样式(例如颜色)(如果找到)。
这是我的尝试:
function highlightInElement(elementId, text) {
var elementHtml = document.body.innerHTML;
var tags = [];
var tagLocations = [];
//var htmlTagRegEx =/<{1}\/{0,1}\w+>{1}/;
var htmlTagRegEx =/<[^<]*>/;
//Strip the tags from the elementHtml and keep track of them
var htmlTag;
while (htmlTag = elementHtml.match(htmlTagRegEx)) {
//console.log('htmlTag: ', htmlTag);
tagLocations[tagLocations.length] = elementHtml.search(htmlTagRegEx);
tags[tags.length] = htmlTag;
elementHtml = elementHtml.replace(htmlTag, '');
}
console.log('elementHtml: ', elementHtml);
//Search for the text in the stripped html
var textLocation = elementHtml.search(text);
if (textLocation) {
//Add the highlight
var highlightHTMLStart = '<span class="highlight">';
var highlightHTMLEnd = '</span>';
elementHtml = elementHtml.replace(text, highlightHTMLStart + text + highlightHTMLEnd);
//plug back in the HTML tags
var textEndLocation = textLocation + text.length;
for (let i = tagLocations.length - 1; i >= 0; i--) {
var location = tagLocations[i];
if (location > textEndLocation) {
location += highlightHTMLStart.length + highlightHTMLEnd.length;
} else if (location > textLocation) {
location += highlightHTMLStart.length;
}
elementHtml = elementHtml.substring(0, location) + tags[i] + elementHtml.substring(location);
}
}
//Update the html of the element
document.body.innerHTML = elementHtml;
}
highlightInElement(document.documentElement, fooInputTxt.value);
为避免混淆,下面是我要完成的工作的详细说明:在整个(外部)网站(不包括标签)的文本中搜索字符串,如果找到,则更改这些实例的样式(例如颜色) 。
那就是你应该做的:)
首先,构建一个递归函数以遍历DOM并获取所有文本节点:
function findTextNodes(node, ret) {
var c = node.childNodes, i, l = c.length;
for( i=0; i<l; i++) {
switch(c[i].nodeType) {
case 1: // element node
findTextNodes(c[i], ret);
break;
case 3: // text node
ret.push(c[i]);
break;
}
}
}
var textNodes = [];
findTextNodes(document.body, textNodes);
现在,您已经拥有文档中所有文本节点的数组,您可以开始在它们中搜索目标。
function searchTextNodes(nodes, search) {
var results = [], l = nodes.length, i,
regex = new RegExp(search,'i'), match,
span;
for( i=0; i<l; i++) {
while( (match = nodes[i].nodeValue.search(regex)) > -1) {
nodes[i] = nodes[i].splitText(match);
span = document.createElement('span');
span.classList.add('highlight');
nodes[i].parentNode.insertBefore(span, nodes[i]);
nodes[i].splitText(search.length);
span.appendChild(nodes[i]);
nodes[i] = span.nextSibling;
}
}
}
searchTextNodes(textNodes, fooInputTxt.value);
而且...就是这样! 为了获得更多荣誉,以下是“撤消”搜索的方法:
function undoSearch(root) {
var nodes = root.querySelectorAll("span.highlight"),
l = nodes.length, i;
for( i=0; i<l; i++) {
nodes[i].parentNode.replaceChild(nodes[i].firstChild, nodes[i]);
}
root.normalize();
}
undoSearch(document.body);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.