查找并替换引号内的文本忽略html标记

Question

我有HTML标签的简单文本和引号中的一些文本我想在引号内的文本上添加span。 例如：

<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标记的引号。

Answer 1

JavaScript已经为你构建了一个内置的DOM解析器 - 而不是试图用正则表达式来解析HTML本身很困难且边缘不可能 - 你可以使用DOM为你带来的内置功能。 在你的情况下，我将使用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
});

这是一个小提琴 。

Answer 2

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

在您使用当前代码替换文本后，取出结果字符串并检查打开的html标记内是否存在任何span标记（例如： <a ... <span> ）并将整个HTML实体替换为原始字符串。 通过这个你可以实现你所需要的。

注意：我已经在Java中完成了相同的操作，因为我现在没有使用该代码片段

希望这对你有所帮助

Answer 3

您可以通过三个单独的步骤执行此操作：

1. 使用标记临时替换HTML标记中的引号
2. 为任何剩余的报价添加跨度
3. 恢复任何标记放置的引号

步骤1：

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

这使用先行看是否报价之后是>之前的下一个<

第2步：

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

第3步：

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