Question

我正在突出显示搜索差异应用程序中的搜索结果，但遇到了一些问题。

在输入中，我们在<pre>标记内获得了一些文本，这些文本已经使用<span>标记进行了突出显示。

<ng-container *ngIf="settings?.allowHtmlTransform">
     <pre [innerHtml]="row?.value" ></pre>
 </ng-container>

我的工作是突出显示当前搜索结果，这就是问题所在。我需要解析的row.value类似于<div class="NORMAL>Sample <span class="MISSING">Text</span></div>。有相当多的突出显示类别（例如，修改，丢失，额外等）

我需要突出显示搜索结果（例如“ a”），但它开始在标记内查找并中断格式设置（对于“突出显示”，我使用相同的<span class="CURRENT">)</span>

问题是，如何在没有这些标签的情况下解析值，但是当我返回突出显示的值时，它们将停留在原处吗？也许有一些漂亮的解决方案？

Answer 1

问了问题已经有两个星期了，回到工作岗位后，我自己找到了解决方案。也许有人觉得它有用。因此，我们的想法是将字符串拆分为用“ <”和“>”分隔的部分。然后我们可以检查每个部分是否为html标记，并仅在文本部分添加突出显示。

这是代码。有一些需要改进的地方，但对于我的情况仍然可以很好地工作。

class Highlighter {
static hlcolors: Map<IHlType, string> = new Map([
    [IHlType.success, 'success'],
    [IHlType.highlight, 'currHl']
]);

static getHlVal(value: string, type: IHlType): string {
    let clazz = Highlighter.hlcolors.get(type);
    return '<span class="' + clazz + '">' + value + '</span>';
}

static hlByPhrase(value: string, type: IHlType, phrase: string): string {
    return value.replace(phrase, Highlighter.getHlVal(phrase, type));
}

static parsehl(value: string, type: IHlType, phrase: string){
    let temp = [];
    let temp1 = value;
    while(temp1.length > 0){
        let stPos = temp1.indexOf("<");
        let enPos = temp1.indexOf(">");
        if(stPos === 0){
            temp.push(temp1.slice(stPos, enPos+1));
            temp1 = temp1.slice(enPos+1);
        }
        else {
            temp.push(temp1.slice(0, stPos));
            temp1 = temp1.slice(stPos);
        }
    }
    let res = "";
    for(let i = 0; i<temp.length; i++){
        if(temp[i].includes("<div") || temp[i].includes("<span") || temp[i].includes("</div") || temp[i].includes("</span"))
        res += temp[i];
        else res += temp[i].replace(phrase, Highlighter.getHlVal(phrase, type));
    }
    return res;
}
}

如何删除用于解析实际值的html标签，然后放回去？

1 个答案: