有两个文件pdf和html，以纯文本字符串（从pdf中提取文本后）和html读取文件，现在尝试使纯文本具有与html字符串相同的html标记。然后对它们进行比较，找出差异
当前不工作的简单示例的最终编辑
var text1="here is example text";
var text2="<html><body><div>here is another <span>example</span> text</div></body></html>";
var div = document.createElement("div");
div.innerHTML = text2;
var text = div.textContent || div.innerText || "";
var content= text.split(" ");
var alltags=text2.match(/<.+?>/g);
var pdfwords=text1.split(" ");
var output="";
for(var j=0; j<alltags.length; j++){
for(i=0; i<pdfwords.length; i++){
if(pdfwords[i]===content[j]){
output+=alltags[i]+pdfwords[i];
}
}
}
document.write(output);
输出应该是
"<html><body><div>here is another<span>example</span> text</div></body></html>"
diff这两个字符串输出，text2显示差异，因为插入了"另一个"
这是一个简单的解决方案，它是一个动态解决方案，因为它将处理找到的任何标签，并只比较文本内容。findDiff()将找到差异，并使用输出和不同单词的数组作为参数调用回调函数。
JSFiddle：https://jsfiddle.net/9svuc7om/18/
/**
* Parse and construct an Array of PDF text tokens
* @params {string} text The PDF text to be parsed
* @return {object} The parsed Array of tokens
*/
function parsePDFText(text) {
var token = text.split(' ');
for (var i=0,l=token.length; i<l; i++) {
// remove token of first space and consecutive space
if (token[i] == '') {
token.splice(i, 1);
}
}
return token;
}
/**
* Return the minimum indexOf among all the arguments
* @params {...number} index The indexOf
* @return {number} The minimum indexOf, -1 if all arguments are -1
*/
function findMinIndex() {
var min;
for (var i = 0, l = arguments.length; i < l; i++) {
// indexOf() returns -1 if not found
if (arguments[i] === -1) {
continue;
}
if (typeof min === 'undefined' || arguments[i] < min) {
min = arguments[i];
}
}
return min || -1;
}
/**
* Parse and construct an Array of HTML tokens
* @params {string} text The HTML text to be parsed
* @return {object} The parsed Array of tokens
*/
function parseHTMLText(text) {
var currentIndex = 0,
tl = text.length,
tokens = [],
token, firstChar, endPos;
while (currentIndex < tl) {
// determine the next token type
firstChar = text.charAt(currentIndex);
if (firstChar == '<') {
// a tag
// find the position of closing tag, assume all tags are well formed
endPos = text.indexOf('>', currentIndex + 1) + 1;
token = {
type: 'tag',
content: text.slice(currentIndex, endPos),
valid: true
}
currentIndex = endPos;
} else if (firstChar == ' ') {
// a space
token = {
type: 'space',
content: ' ',
valid: true
}
currentIndex++;
} else {
// a character, possibliy part of a word
// find the end of the word
// assume a word is delimitered either by tags or space
endPos = findMinIndex(text.indexOf('<', currentIndex), text.indexOf(' ', currentIndex));
// endPos is `-1` if there are not delimiter anymore, end of string reached
if (endPos === -1) {
endPos = tl;
}
token = {
type: 'text',
content: text.slice(currentIndex, endPos),
valid: true
}
currentIndex = endPos;
}
tokens.push(token);
}
return tokens;
}
/**
* Find the difference between pdf text and html text and pass the output and differenc to a callback function
* @params {string} pdfText The pdf text
* @params {string} htmlText The html text
* @params {function} callback The callback function
*/
function findDiff(pdfText, htmlText, callback) {
var output = '', // the final output
diff = [], // the array of different words
pdfTokens = parsePDFText(pdfText),
htmlTokens = parseHTMLText(htmlText),
j=0, hl=htmlTokens.length;
// the pdf text is the reference point, i.e. all the words in pdf text should always be present in html text as well
for (var i=0,pl=pdfTokens.length; i<pl; i++) {
// find the first occurrence of the pdf text
for(; j<hl; j++) {
if (htmlTokens[j].type != 'text') {
// exclude comparison to non-text
continue;
}
// check if the two text matches
if (htmlTokens[j].content == pdfTokens[i]) {
// a match is found
j++;
break;
} else {
// push the different html token into `diff` array
diff.push(htmlTokens[j].content);
// set the `valid` field of token to false
htmlTokens[j].valid = false;
}
}
}
// invalidate the rest of the html text
for(; j<hl; j++) {
if (htmlTokens[j].type == 'text') {
htmlTokens[j].valid = false;
}
}
// concat the final string to output
for (j=0; j<hl; j++) {
if (htmlTokens[j].valid) {
output += htmlTokens[j].content;
}
}
callback(output, diff);
}
您可以使用调用函数
findDiff(text1, text2, function(output, diff) {
console.log(output);
console.log(diff);
});
然而，这种解决方案有一些局限性
- 它假设pdf中的所有内容都存在于HTML文本中
- 它只处理
<>和空格，如果有其他可能的分隔符，例如制表符，则需要额外的代码 - 它假设所有标签都是格式良好的，并且文本内容之间不会有结束标签（如果需要，应该使用
><） - 该函数是一个简化的解决方案，尚未经过充分测试。您不能指望它有任何保修，需要进行一些调整。我建议只提供
body内部的内容，甚至提供更窄的范围，而不是整个HTML文件（如果可能的话），因为HTML文件的内容会有太多的变化
最简单的方法是
var s="Hello everyone on stackoverflow"
var s_split = s.split(' ');
var y = '<html><head></head><body><div>' + s_split[0] + '<span>' + s_split[1] + '</span>' + s_split[2]+' ' + s_split[3] + '</div></body></html>';
检查jsfiddle
为什么不简单地去掉html标记并比较文本呢。
var s = "Hello everyone on stackoverflow";
var y = "<html><head><head><body><div>Hello<span>everyone</span>on stackoverflow</div></body></html>";
//using regular expressions match HTML tags and replace them with empty string. Make sure to trim the output so that the extra whitespaces at either end are removed.
var z = y.replace(/(<([^>]+)>)/ig, ' ').trim();
//compare if the stripped string matches the other string.
if(z == s) {
s = y;
}
alert(s);
小提琴
如果你必须包装特定的单词或文本，那么搜索并替换它，如下所示：
var f = "Hello everyone on stackoverflow";
var o = "Hello";
var e = "everyone on";
var s = "stackoverflow";
if (f.indexOf(e) >= 0) {
var h = f.replace(e,"<strong>"+e+"</strong>");
}else{
var h = f;
}
if (h.indexOf(s) >= 0){
var h = h.replace(s,"<em>"+s+"</em>");
}
if (h.indexOf(o) >= 0){
var h = h.replace(o,"<u>"+o+"</u>");
}
$('body').append('<div>'+h+'</div>');
此处的示例：https://jsfiddle.net/jwqrgsL1/1/