JavaScript正则表达式来查找未包裹在标签中的特殊字词
我正在尝试编写一个正则表达式来搜索一个字符串，并查找包裹在大括号中的单词，这些大括号没有用特定属性（数据占位符）包裹在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遍历和正则表达式组合textnodes解决。 谢谢@ jonathan-m和@frankiethekneeman！
我的解决方案（再次感谢@ 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标签，如果它已经有数据占位符忽略它，如果不检查它的内容，看它是否是一个变量。
循环3：检查每个p标签，查找与其相匹配的文本节点。 如果找到，则创建一个跨度并用包装器替换文本节点。
注意：刚刚意识到我没有在文本节点中测试多次出现，因此可能无法使用此代码。 现在去测试。
在这个问题上直接在我的谷歌浏览器中工作，我发现下面的代码在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也可能很有趣。
链接地址: http://www.djcxy.com/p/59507.html上一篇: JavaScript regex to find special words not wrapped in a tag