查找和替换引号内的文本，忽略 html 标签答案

【问题标题】：find and replace text inside quotes ignoring html tags查找和替换引号内的文本，忽略 html 标签
【发布时间】：2014-09-09 10:56:51
【问题描述】：

我有带有 HTML 标记的简单文本和引号中的一些文本，我想在引号内的文本上添加跨度。例如：

<p>A quick "brown" fox "jumps" over <a href="www.gamescottage.com">the</a> lazy dog.</p>

我想要的是把这条线改成这样：

<p>A quick "<span>brown</span>" fox "<span>jumps</span>" over <a href="www.gamescottage.com">the</a> lazy dog.</p>

我正在使用此代码来执行此操作：

<script>
    $('document').ready(function (){
        var text = $('p').html();
        text = text.replace(/"(.*?)"/g, '"<span class="quote">$1</span>"');
        $('p').html(text);
     });
</script>

但它替换了 HTML 锚标记的引号以及任何解决方案？简而言之，我只想在引号内添加 span，忽略 HTML 标记的引号。

【问题讨论】：

所以你想删除brown中的b？
@adeneo 打错字了..不应删除...
@C-linkNepal - 你怎么知道，人们要求最奇怪的事情？
as jumps 没有改变...... OP只想将引用的文本包装在span标签中......
@adeneo no 我想在引号内添加span，但它也会影响href引号

标签： javascript jquery regex

【解决方案1】：

JavaScript 已经为您提供了一个内置的 DOM 解析器 - 您可以使用 DOM 为您提供的内置功能，而不是尝试使用正则表达式解析 HTML，这本来就很困难且几乎不可能。在您的情况下，我将使用 jQuery 进行演示，但非 jQuery 解决方案同样简单：

$("p"). // all p tags
contents(). // select the actual contents of the tags 
filter(function(i,el){   return el.nodeType === 3; }). // only the text nodes
each(function(i, el){ 
    var $el = $(el); // take the text node as a jQuery element
    var replaced = $el.text().replace(/"(.*?)"/g,'<span>"$1"</span>') // wrap
    $el.replaceWith(replaced); // and replace
});

Here's a fiddle.

【讨论】：

【解决方案2】：

您可以分三个单独的步骤完成此操作：

用标记暂时替换 HTML 标记中的引号
将跨度添加到任何剩余的引号
恢复放置任何标记的引号

第 1 步：

text = text.replace(/([^>"]*)"(?=[^<]*>)/g, '$1#Q#');

这使用前瞻来查看引用是否在下一个 < 之前跟在 > 之后

第 2 步：

text = text.replace(/"(.*?)"/g, '<span class="quote">$1</span>');

第 3 步：

text = text.replace(/#Q#/g, '"');

【讨论】：

真的吗？如果您要对可行的解决方案投反对票，最好说明理由。

【解决方案3】：

根据您的代码，我假设您擅长正则表达式和脚本。这是一个算法，您可以使用它来编写代码。

像在当前代码中那样用 span 替换文本后，获取结果字符串并检查打开的 html 标记（例如：<a ... <span>）中是否存在任何 span 标签，然后替换整个 HTML 实体原始字符串。这样你就可以实现你所需要的。

注意：一旦我现在没有 sn-p，我在 Java 中也做过同样的事情

希望对你有帮助

【讨论】：