Question

我正在尝试编写一个正则表达式来搜索字符串，并找到包含在花括号中的单词，这些单词未包含在具有特定属性（数据占位符）的span标记中。

示例文字：

This is a test. Testing <span class="anything">{variable}</span> wrapped without the attribute, but this one <span data-placeholder="val">{variable}</span> is. The first should match, the second should not, and the last one should as well {variable}

到目前为止，我提出的最好的是：

/[^>]{(.)*}[^>]/g

但这有一些问题。关闭后可能有或可能没有文本，因此该模式与示例文本中的最后一个实例不匹配。它也与第一个实例不匹配，我不知道如何在正则表达式的第一部分写“匹配除了这个词之外的任何东西”。

目标是转换实例（注意任何文字）：

{variable}
<span class="anything">{variable}</span>

到此（或）：

<span data-placeholder="">{variable}</span>
<span data-placeholder="" class="anything">{variable}</span>

不破坏任何已转换的现有实例。

谢谢！

编辑：使用DOM遍历和正则表达式组合解决文本节点。谢谢@ jonathan-m和@frankiethekneeman！

Answer 1

我的解决方案（再次感谢@ jonathan-m和@frankiethekneeman）：

//remove any broken variables
variables = $( 'span[data-placeholder]', this.editor );
for ( i = 0, len = variables.length; i < len; i++ ) {
    if ( pp.arrayIndexOf( dict, variables[ i ].innerHTML ) == -1 ) {
        t = variables[ i ].childNodes[ 0 ];
        $( t ).unwrap( );
    }
}

//convert any variables already in a span tag
variables = $( 'span', this.editor );
for ( i = 0, len = variables.length; i < len; i++ ) {
    t = variables[ i ].innerHTML.match( /^{(.)*}$/ );

    if ( !variables[ i ].hasAttribute( 'data-placeholder' ) && t != null && pp.arrayIndexOf( dict, t[ 0 ] ) != -1 ) {
        variables[ i ].setAttribute( 'data-placeholder', this.getVariable( t[ 0 ] ) );
    }
}

//convert any variables in a text node
variables = $( 'p', this.editor );
for ( i = 0, len = variables.length; i < len; i++ ) {
    for ( j = 0, len2 = variables[ i ].childNodes.length; j < len2; j++ ) {
        if ( variables[ i ].childNodes[ j ].nodeType == 3 ) {
            t = variables[ i ].childNodes[ j ].data.match( /{(.)*}/ );

            if ( t != null && pp.arrayIndexOf( dict, t[ 0 ] ) != -1 ) {
                span = document.createElement( 'span' );
                span.setAttribute( 'data-placeholder', this.getVariable( t[ 0 ] ) );
                span.innerHTML = t[ 0 ];

                variables[ i ].replaceChild( span, variables[ i ].childNodes[ j ] );
            }
        }
    }
}

循环1：如果用户编辑了文本并将变量转换为其他内容，请将已编辑的内容从其包装中分离出来。

循环2：检查每个span标记，如果已经有data-placeholder忽略它，如果没有检查其内容以查看它是否为变量。

循环3：检查每个p标签，查找其中与变量匹配的文本节点。如果找到，请创建一个span并用包装器替换文本节点。

注意：刚刚意识到我没有在文本节点中测试多次出现，因此可能无法使用此代码。现在去测试。

Answer 2

直接在这个问题上使用我的谷歌浏览器，我发现以下代码在JavaScript控制台中是一个很有希望的开始：

代码

nodeList = document.querySelectorAll('span');
nodeArray=[];
for (i=0; i < nodeList.length; i++) {nodeArray.push(nodeList[i]);}
nodeArray.filter(function(node) {return node.innerText.match(/{variable}/)});

请注意我们如何根据文档对象模型选择实际的HTML元素，然后根据文本内容查找候选项。或者，可以使用.innerHTML，或通过赋值给这些属性来实际操作文档内容。

结果

[
<span class="str">
"/span> wrapped without the attribute, but this one <span data-placeholder="val">{variable}</"
</span>
, 
<span class="pln">{variable}</span>
, 
<span class="pln">{variable}</span>
, 
<span class="comment-copy">
"@Jonathan What are the {variable} and the <span...> following it contained in? Are they in another span, div, p, or body tag? if yes, which?"
</span>
, 
<span class="str">/{variable}/</span>
]

jQuery.contains也可能很有趣。

JavaScript正则表达式，用于查找未包含在标记中的特殊单词

2 个答案:

代码

结果