Question

我的意见是：

'<div><strong>test</strong><div><strong>kkk</strong></div><div><strong>111</strong></div></div>'

输出必须是：

'<div><strong>test</strong><div><strong>kkk</strong></div><div>111</div></div>'

（<strong>标记从111展开

这是我到目前为止所做的：

＆＃13;

var input = '<div><strong>test</strong><div><strong>kkk</strong></div><div><strong>111</strong></div></div>';

var effect = 'strong',  // dynamic
    selectedText = '111';  // dynamic

var regex = new RegExp('<' + effect + '>.*' + selectedText + '.*<\/' + effect + '>');
                       
if(regex.test(input)){
    console.log('replacing');
    input = input.replace(regex, selectedText);
}

console.log(input);

＆＃13;

出于某种原因，它输出的结果为：<div>111</div></div>

我该如何解决这个问题？

Answer 1

您当前的正则表达式<strong>.*111.*<\/strong>匹配太多（=贪婪）。

您只需使用[^<>]*

来使用非标记

＆＃13;

var input = '<div><strong>test</strong><div><strong>kkk</strong></div><div><strong>111</strong></div></div>';

var effect = 'strong',  // dynamic
    selectedText = '111';  // dynamic

var regex = new RegExp('<' + effect + '>([^<>]*)' + selectedText + '([^<>]*)</' + effect + '>');
// Or this one if you do not want to keep any text around the selectedText
//var regex = new RegExp('<' + effect + '>([^<>]*)' + selectedText + '([^<>]*)</' + effect + '>');
                       
if(regex.test(input)){
    console.log('replacing');
    input = input.replace(regex, "$1" + selectedText + "$2");
    // Or this one if you opt to replace the whole text with your selectedText
    // input = input.replace(regex, selectedText);
}

console.log(input);

＆＃13;

Answer 2

你的正则表达式中的

.*贪婪地匹配，即它会尝试尽可能多地覆盖输入，同时仍然使整个表达式匹配。删除通配符可以解决问题：

var input = '<div><strong>test</strong><div><strong>kkk</strong></div><div><strong>111</strong></div></div>';

var effect = 'strong',  // dynamic
    selectedText = '111';  // dynamic

var regex = new RegExp('<' + effect + '>' + selectedText + '<\/' + effect + '>');
                       
if(regex.test(input)){
    console.log('replacing');
    input = input.replace(regex, selectedText);
}

console.log(input);

输出：

"replacing" js:21:4
"<div><strong>test</strong><div><strong>kkk</strong></div><div>111</div></div>"

但是as CommuSoft mentioned in the comments，像xpath这样的XML或HTML特定工具是查询和操作嵌套XML或HTML结构的更好选择。您的操作可以看作是从一个嵌套结构到另一个嵌套结构的转换，不同的嵌套结构，因此可能需要查看xslt。

无法理解为什么replace（）在这里不起作用

2 个答案: