javascript - 如果文本具有编码字符，则删除跨度标签问题

Question

我正在寻找在浏览器内编辑器中删除包裹文本 block 的跨度标签，但如果文本包含任何类型的特殊字符(如换行符“\n”)或编码字符(如   、 • 等)，则会遇到麻烦。

这是我的代码，适用于没有编码字符的句子

function fnIgnoreThisErr(evtTargID){    
    // use the passed parameter 
    var errIdx = evtTargID.substr(evtTargID.indexOf('err-') + 4);  
    // buld span tag for finding
    var errSpan = "span.err-" + evtTargID;
    // declare the editor
    var editor = CKEDITOR.instances.editor1;
    // get text from the editor
    var edata = editor.getData();  
    // find the specific span in the text
    var spanData = $( edata ).find(errSpan); 
    // get outerHTML and innerText to use for replacement
    var myCurrText = spanData[0].outerHTML;
    var myNewText = spanData[0].innerHTML;
    // standard js replace works if no special chars
    var replace_text = edata.replace(myCurrText, myNewText);  //
    // sets the data back in CKEditor
    editor.setData(replace_text);
}

这是带有 span 标签的文本示例 我的当前文本:

<span class=\"vts-warn vts-ParseFailure err-2\">Approval of ICA<br />\n&nbsp; GAMA requested further clarification of proposed &sect;&sect;25.1739 (now &sect;25.1729) and 25.1805(b) (now &sect;26.11(b)) requirements that ICA prepared in accordance with paragraph H.</span>

并删除了 span 标签。

Approval of ICA<br />\n&nbsp; GAMA requested further clarification of proposed &sect;&sect;25.1739 (now &sect;25.1729) and 25.1805(b) (now &sect;26.11(b)) requirements that ICA prepared in accordance with paragraph H.

它对于没有任何编码字符的简单句子非常有效。我可以切换到 jQuery，但也无法让 ReplaceWith 工作。

我在这里缺少什么？

Answer 1

我明白了。 html 实体与浏览器和我的 JS 呈现/解释它们的方式之间似乎存在差异。
即，span 的outerHTML 不是edata 中文本的逐字符匹配。

所以我只获取跨度起点的indexOf 值和跨度节点的长度。然而，由于所提到的差异，该长度可能包括额外的字符。所以，接下来，我找到 '' 标签的确切位置。从那里，我构建了一个与需要替换的文本完全匹配的字符串变量。

这是我的最终代码。 (为了清晰起见，我将其保留为长格式)

function fnIgnoreThisErr(evtTargID){    
    // use the passed parameter 
    var errIdx = evtTargID.substr(evtTargID.indexOf('err-') + 4);  
    // buld span tag for finding
    var errSpan = "span.err-" + evtTargID;
    // declare the editor
    var editor = CKEDITOR.instances.editor1;
    // get text from the editor
    var edata = editor.getData();  
    // find the specific span in the text
    var spanData = $( edata ).find(errSpan); 
    // extract the span class name
    var spanTag = '<span class="'+spanData[0].className+'">'
    // find indexOf value for the span opening tag
    var spanPos = edata.indexOf(spanTag);
    // get the initial length of the span.
    var spanLength = spanData[0].outerHTML.length;
    // get the actual text from that span length.
    var spanString = edata.substring(spanPos,spanPos+spanLength);
    // find the acutal position of the span closing tag
    var spanClose = spanString.indexOf('</span>');
    var spanTagClosePos = spanClose+7;
    // extract the true text comprising the span tag
    var spanStringMod = edata.substring(spanPos,spanPos+spanTagClosePos);
    var spanInnerHtm = spanData[0].innerHTML;
    log("errSpan: "+ errSpan);
    log("errSpanClass: "+ errSpanClass);
    log("spanData: "+  JSON.stringify(spanData));
    log("spanPos: "+ spanPos);
    log("spanTagClosePos: "+ spanTagClosePos);
    log("spanStringMod: "+ spanStringMod);
    log("spanInnerHtm: "+ spanInnerHtm);
    var newEdata = edata.replace(spanStringMod, spanInnerHtm);  
    log(" newEdata: "+ newEdata);   
    // update the editor
    editor.setData(newEdata);
}

我希望这可以在某个时间、某个地方对某人有所帮助!

干杯!